CSS add marker/symbol over an element [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have two images:
<img ng-src="image1.jpg" class="regular">
<img ng-src="image2.jpg" class="favorite">
For the second image, I am looking for a way to structure my CSS class such that a marker/symbol appears over the image (example a star for favorite or just a letter - maybe a drawing). Is there a way to do so?

Answer 1

As <img> element cannot have pseudo content, so you could wrap it into a <span> tag or so into the markup, and apply the pseudo content on it instead.
.favorite {
position: relative;
display: inline-block;
}
.favorite:before {
content: "\2605";
position: absolute;
left: 5px;
top: 5px;
}
<span class="favorite"><img src="//dummyimage.com/100x100"/></span>

Answer 2

Absolute position works.
Try:
With:
.regular {
position: absolute;
left: 0px;
}
.favorite {
position: absolute;
left: 100px;
border: 1px solid black;
}
Code here: https://jsfiddle.net/zyng2Lxj/

Answer 3

as image tag doesn't support after pseudoelement, what about a little jquery code like:
$(function() {
$('.favorite').after('<img src="" class="icon" />');
});
the position the image with the class as in this FIDDLE
(all credit to #Christopher Harris for his answer at Does :before not work on img elements?)