Как отобразить заголовок изображения под изображением с помощью SASS?

Question

Если для изображения задан параметр title, как мне сделать его видимым на странице под изображением?Например, скопировав его в &:after контент (я не знаю синтаксис для этого, я впервые использую SASS).

Answer 1

Вы не можете добиться этого с помощью CSS, и, следовательно, также не используя SASS, Less, Stylus или что-то еще.

Причина этого в том, что ::before и ::after могут использоваться только для элементов, которые могут иметь content (что находится между открывающим тегом и закрывающим тегом).

Пример:

<div>
  content
</div>

В этом примере браузер может вставить ::before и ::after следующим образом:

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

Тег img не может иметь content,тем не менее, потому что у него просто нет закрывающего тега:

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

Как вы можете видеть, нет содержимого и, следовательно, нет позиций для вставки ::before и ::after.

Другие элементы, которые вы не можете использовать ::before и ::after on:

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