如何使用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其他元素：

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