Add CSS content image after element

Question

I cannot reach to add an image after an input element for form validation with JQuery. Doesn't work also if I add the class manually on the element...

HTML:

<script type="text/javascript">
      $(document).ready(function(){
          $('#last_name').addClass('cross');
      });
</script>

<label for="last_name">*Last Name:</label>
<input type="text" id="last_name" value="<?=$last_name?>" />

CSS:

.cross:after {
    content:url(/ico/cross.png);
    /* Tried also with:
      content:url('/ico/cross.png');
    AND
      content: '';
      background:url(/ico/no_check.png); */
}

The `::after` pseudo-element places the 'element' *within* the element itself 'after' its contents (not after the element), an `input` is a void element that cannot contain any other HTML. This cannot work, unfortunately. See, for example: "CSS :after pseudo element on INPUT field](http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field)." — David Thomas, Jan 03 '14 at 00:08
Thank you, can I reach that with jQuery .after? Is it possible to add an image inside .after()? — Perocat, Jan 03 '14 at 00:11

score 3 · Accepted Answer · edited May 23 '17 at 12:23

3

The ::after pseudo-element places the 'element' within the element itself 'after' its contents (not after the element), an input is a void element that cannot contain any other HTML. This cannot work, unfortunately. See, for example: "CSS :after pseudo element on INPUT field."

With jQuery, however, you could add a new image (not a background-image, or pseudo-element) using the following (though untested):

$('.cross').after('<img src="ico/cross.png" />');

Simple demo.

References:

after().

edited May 23 '17 at 12:23

Community

1
1

answered Jan 03 '14 at 00:12

David Thomas

249,100
51
377
410

What I thought, see comment! Thank you – Perocat Jan 03 '14 at 00:13

score 1 · Answer 2 · answered Jan 03 '14 at 00:21

I think you would do better using this route:

Live Demo

CSS:

label[for='last_name'] {
  content: url(https://www.google.com/images/srpr/logo11w.png);
  width: 32px;
  height: 32px;
}

And to distinguish it in writing, use placeholder:

<label for="last_name"></label>
<input name="last_name" placeholder="Last Name" />

Add CSS content image after element

2 Answers2

Live Demo

CSS:

Linked