This answer (the text below the line) doesn't work (for text-based input
s anyway), but it's being left in situ on the off-chance it saves someone else the bother of trying to achieve the same end-result by the same means. The only way to do this is, as @Tim notes, in his answer, to wrap the input
(or other) elements in another element, such as a span
, and then style that with the :after
pseudo-element.
JS Fiddle demo of a working example.
Um, they seem to work quite okay JS Fiddle demo, except that, without the position: absolute
the :after
content appears within the element itself (inside the buttons, or checkboxes and so on).
html:
<button class="req">button</button>
<input class="req" type="text" />
<input class="req" type="radio" />
<input class="req" type="checkbox" />
<textarea class="req"></textarea>
css:
input,
textarea {
display: block;
}
.req {
position: relative;
}
.req:after {
content: "*";
margin: 0 0 0 0.5em;
position: absolute;
top: 0;
right: -1em;
}