Sazz Sazz - 3 months ago 8
CSS Question

Can the content:" "; have an image tag or say an image?

Okay so I have been doing researches but still couldn't figure out if 'content:" ";' can contain images by any chance.

I don't whether my question is even appropriate or not. But would be happy to know if it could contain image links. Thanks.

For example I have an image tag as:

<img src="kitten.jpg">


could i add this image in the content property

:after {
content:" ";
}

Answer

From http://www.w3schools.com/cssref/pr_gen_content.asp, property values of content:

url(url) | Sets the content to be some kind of media (an image, a sound, a video, etc.)

So this will work:

.yourDiv:after { 
content: url('image-src'); 
}

Example snippet:

p:after {
  content: url('https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png?itok=Jxf0IlS4');
  }
<div>
  <p>Some Stuff</p>
</div>

Comments