1

I'm limited to only using CSS on a current project and I'd like to add a subtitle to an img element.

Here's the html:

#page-2-section-6-row-1-column-0-bullet-0>div>button>img::after {
  content: "DMIs";
  background-color: #ffee58;
}
<div id="page-2-section-6-row-1-column-0-bullet-0">
  <div>
    <button>
            <img src="local/path/to/image.png">
        </button>
  </div>
</div>

When I check this in dev tools, the 'after' is added inside the opening and closing img tags, and I don't see the 'content' text anywhere.

I've been battling with this for a couple hours now. What am I doing wrong?

EDIT: Just tried adding the ::after after a p element and that works, so it looks like the problem is img tag related?

Mobarak Ali
  • 751
  • 5
  • 19
moosefetcher
  • 1,841
  • 2
  • 23
  • 39
  • Try to add the ::after to you button: https://codepen.io/aureliendebord/pen/JqYygV – Aurélien May 08 '19 at 14:22
  • tag is a self-closing tag, so it has no closing tag, and ::after and ::before pseudo element will not applicable to tag. – Mobarak Ali May 08 '19 at 14:22
  • Jinx! I did, indeed, just try adding the after to the button and that has, at least put the text in the right place! And @MobarakAli I didn't write this html, but this image does have a closing tag; I was just describing what I was seeing. Thanks for the info about 'replaced' elements though. Hadn't encountered that concept before! – moosefetcher May 08 '19 at 14:27

0 Answers0