Chris Chris - 6 months ago 22
CSS Question

CSS :after input does not seem to work

I am using a framework that decorates a form by adding a field_with_errors class around the labels and inputs. I want to style these such that an asterisk appears after the input element.

<div class="field_with_errors"> Label: </div>
<div class="field_with_errors"> <input type="text"/> </div>


The
:after
selector works fine with the
div
, however this inserts content after the label too:

See:



.field_with_errors {
display: inline;
color: red;
}
.field_with_errors:after {
content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" />
</div>





Modifying the selector to target just the input, and the asterisk disappears entirely

See:



.field_with_errors {
display: inline;
color: red;
}
.field_with_errors input:after {
content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
<input type="text" />
</div>





Is it possible to insert content after the input only just using CSS?

Answer

Input elements are replaced elements. Pseudo-elements, such as :after will not work on these elements.

Options:

  • Use a container, such as a <div> or <span>.
  • Adjust the border-left (or even a border-image), margin-left and/or padding-left properties to add a visual indication at the left side.