css - 通过 :after 在下一行添加标题属性

Question

在我的 website 上，我得到了几张链接到各种服务的图片。今天，我想在图像下添加服务名称。该名称已经在 anchor 标签的标题属性中，所以我认为这应该很容易。我这样试过:

a[title]:after{
 content:"\A" attr(title);
 font-size:10px;
 text-decoration: underline;
}

问题是:换行符被忽略，文本显示为内联。有什么解决办法吗？

Answer 1

您可以使用 display: block 来强制换行，但这似乎要求父 a 也是 显示: block

a {
 display: block;
}

a[title]:after{
 display: block;
 content: attr(title);
 font-size:10px;
 text-decoration: underline;
}

...或者，您可以使用 position: absolute;，尽管这也意味着将 CSS 添加到您的 a 样式定义中:

a: {
position: relative;
/* ...everything else...*/
}

a[title]:after{
 position: absolute;
 top: 1em; /* assuming your 'a' font-size is 1em, with no line-height/padding, adjust to taste */
 left: 0; /* assuming you want it aligned with the left-hand side of the parent 'a' */
 content: attr(title);
 font-size:10px;
 text-decoration: underline;
}

演示已添加到 JS Bin