我有一組7個單選按鈕，我需要中間的那個（id=q1val6）后面有一條短的垂直線（以指示likert刻度的零點）。<form name="form1" action="#" onsubmit="jsPsych.finishTrial()" method="post"> <div class="likertline0"><input class="radio" style="display:inline"  type="radio" id="q1val3" name="q1" value="-3"/><input class="radio" style="display:inline"  type="radio" id="q1val4" name="q1" value="-2"/><input class="radio" style="display:inline"  type="radio" id="q1val5" name="q1" value="-1"/><input class="radio" style="display:inline"  type="radio" checked id="q1val6" name="q1" value="0"/><input class="radio" style="display:inline"  type="radio" id="q1val7" name="q1" value="1"/><input class="radio" style="display:inline"  type="radio" id="q1val8" name="q1" value="2"/><input class="radio" style="display:inline"  type="radio" id="q1val9" name="q1" value="3"/> </form>CSS:        .likertline0:before {            content: '';            position: relative;            top: 16px;            display: block;            z-index: -1;            left: 4%;            background-color: gray;            height: 4px;            align-items: center;            width: 93%;        }        .radio {            display: none;            width: 20px;            margin: 0 10px 0 10px;            /* this is a green */        }        .radio input[type='radio'] {            display: none;        }        .radio label {            color: #666;            font-weight: normal;        }        .radiolabel:before {            content: " ";            display: inline-block;            position: relative;            top: 5px;            margin: 0 5px 0 0;            width: 20px;            height: 20px;            border-radius: 11px;            border: 2px solid #004c97;            background-color: transparent;        }我正在嘗試在背景中使用彩色div，但它似乎不起作用，也許是因為我有：：before運算符，該運算符位于按鈕后面的行中。我更喜歡一個簡單的解決方案，而不隱藏按鈕本身并用圖像替換它們，但如果這是唯一的方法，那么請告訴我。