单选按钮后面的垂直线

Question

我有一组由7个单选按钮组成的按钮，我需要在中央的一个（id = q1val6）后面有一条短的垂直线（以表示李克特量表的零点）。

<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;
        }

        .radio input[type=radio]:checked+label:after {
            border-radius: 11px;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 9px;
            left: 10px;
            content: " ";
            display: block;
            background: #004c97;
        }

我正在背景中使用彩色div进行实验，但这似乎不起作用，可能是因为我在按钮后面的行中有:: before运算符。我希望有一个简单的解决方案，而不是隐藏按钮本身并用图像替换它们，但是如果那是唯一的方法，请告诉我。

编辑：我刚刚意识到CSS部分不正确，我在其中放置了不相关的内容，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 */
        }

Answer 1

[也许尝试在CSS中而不是组中调用该特定单选按钮的ID。像这样：

#q1val6:before {
                content: '';
            position: relative;
            top: 16px;
            display: block;
            z-index: -1;
            left: 4%;
            background-color: gray;
            height: 4px;
            align-items: center;
            width: 93%;  
        }

这里是示例：

#q1val6: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;
        }

        .radio input[type=radio]:checked+label:after {
            border-radius: 11px;
            width: 12px;
            height: 12px;
            position: absolute;
            top: 9px;
            left: 10px;
            content: " ";
            display: block;
            background: #004c97;
        }

<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>