Displaying text message below radio button once it is checked-CodePudding

I have two radio buttons side by side.After the first radio button is checked I have to display the text below it. I'm using this code but the text comes vertically.I want to display it horizontally.

input[type=radio]:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%
}

input[type=radio]:checked:after {
  content: 'Are u sure you want to select all';
  display: contents;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%;
}

<form>
  <label>
         <input type="radio" name="radio"/>
         Radio1
      </label>
  <label>
         <input type="radio" name="radio"/>
         Radio2
      </label>
</form>

CodePudding user response：

position:absolute will make it exceed the limitation of it's container (the label). Also why did you limit the elem to width:15px?

input[type=radio]:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%
}

input[type=radio]:checked:after {
  content: 'Are u sure you want to select all';
  background: transparent;
  border: 2px solid #004ecb;
    position: absolute;
}

<form>
  <label>
         <input type="radio" name="radio"/>
         Radio1
      </label>
  <label>
         <input type="radio" name="radio"/>
         Radio2
      </label>
</form>

CodePudding user response：

Increase the width of ::after element

input[type=radio]:before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: transparent;
  border: 2px solid #004ecb;
  border-radius: 50%
}

input[type=radio]:checked:after {
  content: 'Are u sure you want to select all';
  display: inline-block;
  height: 15px;
  width:200px;
  background: transparent;
  border-radius: 50%;
}

<form>
  <label>
         <input type="radio" name="radio"/>
         Radio1
      </label>
  <label>
         <input type="radio" name="radio"/>
         Radio2
      </label>
</form>