html5 - Possible to add image caption with css pseudo content? -

html5 - Possible to add image caption with css pseudo content? -

i looking easiest, maintainable way this:

these text slugs appended images throughout site. same thing, images varied , come cms.

i know how image set position relative , div "there's improve way" in absolutely positioned kid div.

however, since requires html added every image gets treatment, looking way css class using :before pseudo element. far, applying class wrapping link has no effect:

<a href="#" class="tabw"><img src="imagepath" alt=""></a> .tabw img:before { content: 'theres improve way'; color: red; font-size: 18px; }

is sort of thing possible? having whole thing in css means have have cms apply class attribute when needed.

yeah, ::before , ::after don't work on images. can apply them wrapper link:

a{ position: relative; } a, > img{ display:inline-block; } a::before{ content: 'theres improve way'; position: absolute; left: 0; top: 0; width: 80%; height: 20px; left: 10%; background: #000; opacity: 0.4; color: red; font-size: 18px; }

demo

if want text added in html, you'll have set real element in link (and apply same rules it, without content)

css html5 css3 pseudo-element