Add content to text input

<input type="email" size="61" class="focus">

.focus {border: 1px solid red;outline: none;}

.focus:before{
content: "X";
position: relative;
top: -24px;
left: 500px;
color: red;
}

How can I get the X mark to show up in the text box?

 

Input element can be very stubborn when it comes to free styling.
And when you need to add a content into it, wait... you can not .
See this: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input:
"Permitted content - None, it is an empty element."

Untested, but perhaps wrapping that input with label element might do a trick?

Hendra

 

<input type="email" size="61" class="focus" value="X">