如何使用SASS在图像下方显示图像标题？

Question

鉴于图像已指定其title参数，如何使它在图像下方的页面上可见？例如。通过将其复制到&:after内容中（我不知道它的语法，我是第一次使用SASS）。

Answer 1

您无法使用CSS实现此目的，因此也无法使用SASS，Less，Stylus或您拥有的东西。

这样做的原因是::before和::after仅可用于可以具有content的元素（这是在开始标记和结束标记之间）。 / p>

示例：

<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 />