CODEWITHSUNDEEP
cssimagesass
Ivan
Ivan

Reputation: 64217

How to display an image title below the image with SASS?

Given an image has its title parameter specified, how do I make it visible on the page below the image? E.g. by copying it to &:after content (I don't know the syntax for this, I'm using SASS for the first time).

Upvotes: 1

Views: 96

Answers (1)

connexo
connexo

Reputation: 56763

You cannot achieve that using CSS, and thus, also not using SASS, Less, Stylus or what have you.

The reason for this is that ::before and ::after can only be used on elements that can have content (which is what is between the opening tag and the closing tag).

Example:

<div>
  content
</div>

In this example the browser can insert ::before and ::after like this:

<div>
  ::before
  content
  ::after
</div>

An img tag cannot have content, though, because it simply does not have a closing tag:

<img src="path/to/my/img.png" title="my image title" />

As you can see there is no content, and thus, no positions to insert ::before and ::after.

Other elements you cannot use ::before and ::after on:

<input /> <!-- doesn't matter which type -->
<br />
<hr />

Upvotes: 2

Related Questions