Vertical line behind radio button

Question

I have a group of 7 radio buttons and I need the one in the center (id=q1val6) to have a short vertical line behind it (to indicate the zero point of a likert scale).

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

I'm experimenting with a colored div in the background but it doesn't seem to work, maybe because I have the ::before operator that is there for the line behind the buttons. I would prefer a simple solution without hiding the buttons themselves and replacing them with images, but if that's the only way then let me know.

EDIT: I just realized that the CSS part is not correct, I put stuff in there that is not relevant, the CSS should only be like this:

  .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

Here's my new answer being able to show it in firefox.

.likertline0:before {
            content: '';
            position: relative;
            top: 43px;
            display: inline-block;
            z-index: -1;
            background-color: gray;
            height: 4px;
            align-items: center;
            left: 15px;
            width: 265px;
        }

.vline:before {
            content: '';
            position: relative;
            top: 22px;
            display: block;
            z-index: -2;
            left: 149px;
            background-color: gray;
            height: 30px;
            align-items: center;
            width: 4px;
}
        
        
        .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">
<div class="vline">
<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"/>
</div>
</div>
 </form>