Put text inside a radio button using css

<input type="radio" name="radio" checked> <input type="radio" name="radio"> <input type="radio" name="radio"> <input type="radio" name="radio"> <style> input[type="radio"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; border: 1px solid blue; width: 30px; height: 30px; margin: 16px 9px; content: none; outline: none; box-shadow: 0 0 6px rgba(0,0,0,.4); border-radius:3px; position: relative; transition-duration: 1s; } input[type="radio"]:checked { border-radius: 50%; border-color:green; } input[type="radio"]:checked::before { color: blue; content: "hi"; font-weight: bolder; position: absolute; width: 10px; top: 6; left: 50%; margin-left: -5px; } </style>