Radio Buttons Fill - html

Question

I'm Having trouble with my radio buttons, I don't want them to entirely fill the circle. Any word of advice. Here is link to what is happening on Codepen.
https://codepen.io/winterlion/pen/LYYJwZP
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text:before {
content: '';
display: inline-block;
vertical-align: text-bottom;
width: 18px;
height: 18px;
margin-right: 5px;
border-radius: 50%;
border: 2px solid #235b96;
outline: none;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked+label .text:before {
content: '';
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>

Answer 1

If I understood your question right, you just want to move styles related to a green dot to an ::after pseudo element that must be a bit smaller than ::before.
.item .text {
position: absolute;
display: inline-block;
cursor: pointer;
}
.item .text::before,
.item .text::after {
content: '';
display: inline-block;
margin-right: 5px;
border-radius: 50%;
}
.item .text::before {
width: 18px;
height: 18px;
border: 2px solid #235b96;
box-shadow: 0 0 5px 0px gray inset;
}
.item input[type="radio"]:checked + label .text::after {
width: 12px;
height: 12px;
position: absolute;
left: 5px;
top: 5px;
}
.item input[type="radio"] {
display: none;
}
.item input[type="radio"]:checked + label .text:after {
color: #235b96;
background-color: #479623;
}
<div class="item">
<input type="radio" id="r1" name="group1" value="trial1" />
<label for="r1" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Radio Buttons</h1>
<hr class="split-hr">
<br>
<span class="text"></span>
</label>
</div>
<div class="item">
<input type="radio" id="r2" name="group1" value="trial2" />
<label for="r2" class="wrapper">
<span class="background"></span>
<h1 class="rp-text">Buttons</h1>
<span class="text"></span>
</label>
</div>