Css 通过：after在下一行添加标题属性

在我的网站上，我得到了一些链接到各种服务的图片。今天，我想在图像下添加服务名称。该名称已经在锚标记的title属性中，所以我认为这应该很简单。我这样试过：

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

---

问题是：换行符被忽略，文本以内联方式显示。有什么解决方案吗？

您可以使用

显示：块

强制换行，但这似乎要求父

a

也是

显示：块

a {
 display: block;
}

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

…或者，您可以使用

位置：绝对

，但这意味着也要将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;
}

演示添加到