Is it possible to set an after pseudo-element before its input in the css heritance?

Question

Need to make the after element show up when its input is checked.

I know that input elements do not accept pseudo elements, this is the main reason why I am not using the after element on the radio input.

.entireLine label:after input[type="radio"]:checked{
    position: absolute;
    top: 2px;
    left: 15px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #13abe1;
    color: transparent;
    content: "";
}

<div class="entireLine">
  <label>
    <input type="radio" name="person_type" value="J" checked="checked">
  PESSOA JURÍDICA
  </label>
</div>

Goal: make the after element show up when the input is checked. Errors: None

Answer 1

You are trying to style the radio when it's checked, no the label:after pseudo element.

What you can do for that is using a sibling element of the radio and select it with a sibling selector: radio:checked + .new-element (or ~ if .new-element is not the adjacent element).

Your html will like like this:

<label>
  <input type="radio"/>
  <span class="new-element" />
</label>