Highligth background of checked radio button

by agib

HTML

<div class="container">
    <label>
        Er du med?
    </label>
    <label>
        <input type="radio" name="geddit" value="yes">Jep
    </label>
    <label>
         <input type="radio" name="geddit" value="no">Næh  
    </label>
</div>

CSS

body {
    font-family: Arial, sans-serif;
}
.container {
    width: 48em;
    margin: 0 auto;
}
input[type="radio"] {
        position: relative;
}
input[type="radio"]:checked:before {
    content: "";
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -10px;
    right: -100vw;    
    background-color: lightblue;
    z-index: -10000;
}
label {
    line-height: 2;
    display: block;
}