Radio button text covers options below - css

Question

I am using this radio button effect - https://codepen.io/tomma5o/pen/grJyzL/ which works OK, but now I ran into problem where a few of my options are longer text and it goes over bottom option (because there is 30px height on li).
Here is example - https://codepen.io/BrixyX/pen/OJMwjrN. Is there any easy fix for this, because whatever I try, I mess up the effect?
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
::selection {
background: none;
}
body {
background: #BADA55;
font-family: 'Roboto';
font-weight: 500;
text-transform: uppercase;
color: #2E8612;
overflow: hidden;
height: 100%;
}
h1 {
font-weight: 100;
text-align: center;
margin: 0;
padding: 0;
font-size: 50px;
}
h4 {
font-weight: 400;
text-align: center;
margin: 0;
padding: 0;
margin-bottom: 50px;
}
.continput {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 500px;
height: 270px;
padding: 16px;
box-sizing: border-box;
}
ul {
list-style-type: none;
width: 220px;
margin: auto;
}
li {
position: relative;
padding: 10px;
padding-left: 40px;
height: 30px;
}
label:before {
content: "";
width: 15px;
height: 15px;
background: #fff;
position: absolute;
left: 7px;
top: calc(50% - 13px);
box-sizing: border-box;
border-radius: 50%;
}
input[type="radio"] {
opacity: 0;
-webkit-appearance: none;
display: inline-block;
vertical-align: middle;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
height: 30px;
position: absolute;
left: 0;
top: calc(50% - 15px);
cursor: pointer;
}
.bullet {
position: relative;
width: 25px;
height: 25px;
left: -3px;
top: 2px;
border: 5px solid #fff;
opacity: 0;
border-radius: 50%;
}
input[type="radio"]:checked~.bullet {
position: absolute;
opacity: 1;
animation-name: explode;
animation-duration: 0.350s;
}
.line {
position: absolute;
width: 10px;
height: 2px;
background-color: #fff;
opacity: 0;
}
.line.zero {
left: 11px;
top: -21px;
transform: translateY(20px);
width: 2px;
height: 10px;
}
.line.one {
right: -7px;
top: -11px;
transform: rotate(-55deg) translate(-9px);
}
.line.two {
right: -20px;
top: 11px;
transform: translate(-9px);
}
.line.three {
right: -8px;
top: 35px;
transform: rotate(55deg) translate(-9px);
}
.line.four {
left: -8px;
top: -11px;
transform: rotate(55deg) translate(9px);
}
.line.five {
left: -20px;
top: 11px;
transform: translate(9px);
}
.line.six {
left: -8px;
top: 35px;
transform: rotate(-55deg) translate(9px);
}
.line.seven {
left: 11px;
bottom: -21px;
transform: translateY(-20px);
width: 2px;
height: 10px;
}
input[type="radio"]:checked~.bullet .line.zero {
animation-name: drop-zero;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.one {
animation-name: drop-one;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.two {
animation-name: drop-two;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.three {
animation-name: drop-three;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.four {
animation-name: drop-four;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.five {
animation-name: drop-five;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.six {
animation-name: drop-six;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
input[type="radio"]:checked~.bullet .line.seven {
animation-name: drop-seven;
animation-delay: 0.100s;
animation-duration: 0.9s;
animation-fill-mode: forwards;
}
#keyframes explode {
0% {
opacity: 0;
transform: scale(10);
}
60% {
opacity: 1;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
#keyframes drop-zero {
0% {
opacity: 0;
transform: translateY(20px);
height: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-2px);
height: 0px;
opacity: 0;
}
}
#keyframes drop-one {
0% {
opacity: 0;
transform: rotate(-55deg) translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(-55deg) translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-two {
0% {
opacity: 0;
transform: translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-three {
0% {
opacity: 0;
transform: rotate(55deg) translate(-20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(55deg) translate(9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-four {
0% {
opacity: 0;
transform: rotate(55deg) translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(55deg) translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-five {
0% {
opacity: 0;
transform: translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-six {
0% {
opacity: 0;
transform: rotate(-55deg) translate(20px);
width: 10px;
}
20% {
opacity: 1;
}
100% {
transform: rotate(-55deg) translate(-9px);
width: 0px;
opacity: 0;
}
}
#keyframes drop-seven {
0% {
opacity: 0;
transform: translateY(-20px);
height: 10px;
}
20% {
opacity: 1;
}
100% {
transform: translateY(2px);
height: 0px;
opacity: 0;
}
}
<div class="continput">
<h1>Jelly Radio btn</h1>
<h4>I hope you enjoyed it</h4>
<ul>
<li>
<input checked type="radio" name="1">
<label>OMG a radio! Longer option text Longer option text Longer option text Longer option text Longer option text Longer option text Longer option text Longer option ...</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
<li>
<input type="radio" name="1">
<label>Uuuuh radio</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
<li>
<input type="radio" name="1">
<label>radio everywhere</label>
<div class="bullet">
<div class="line zero"></div>
<div class="line one"></div>
<div class="line two"></div>
<div class="line three"></div>
<div class="line four"></div>
<div class="line five"></div>
<div class="line six"></div>
<div class="line seven"></div>
</div>
</li>
</ul>
</div>

Answer 1

I have cleaned up a few things and created a new fiddle from your pen here.
Firstly, I've tried removing the absolute positioning being used in a lot of places.
I've also made use of the feature that the label element provides which is interaction with the input elements.
I've moved your radio elements inside the label and have also moved the bullet animation accordingly.
Overall, the label element is now being used as a wrapper for all your elements inside of it, and hence those elements would align themselves based on the size of their parent.
P.S., since I tried to wrap this up quickly, I've center-aligned the bullet inside your label using the translate(-50%) hack. There are other cleaner ways of doing this but this one was just a quicker way for now.

Answer 2

There are several ways available to fix the issue of long option texts covering the rest of the options.
The first option is to change the width of the continput class to a higher value so that more text can fit inside of the labels. The labels are being constrained by the margin and padding enabled by the list and list items the radio buttons are put inside of. Hence a wider width will mean that more option text can be neatly displayed.
The second option is to set the overflow property of the list items to hidden, like this (new property at the bottom of the definition):
li {
position: relative;
padding: 10px;
padding-left: 40px;
height: 30px;
overflow: hidden;
}
This way, text that cannot be displayed without overflowing from the list items will be hidden and not cover text belonging to radio buttons further down. There are also more options for the overflow setting; the Mozilla MDN web docs has a short article on the property: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
The third option is a combination of these options above. This should result in something that looks and works in a way that suits your needs. If you haven't started inspecting and experimenting with your own content using something like Google Chrome's Inspect function yet, I recommend you to read a tutorial for the browser you are using. Zapier has an in-depth tutorial for Google Chrome here and I see that Microsoft have incorporated the same tools that are available in Google Chrome into their updated Microsoft Edge (with the blue and green logo).