选中后在单选按钮下方显示文本消息

Question

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>

Answer 1

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>

Answer 2

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>