在下一行添加title-attribute通过:after

Question

在我的website上，我收到了几张链接到各种服务的图片。今天，我想在图像下面添加service-name。这个名字已经在锚标签的title属性中了，所以我想这应该很简单。我是这样尝试的：

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

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

Answer 1

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

a {
 display: block;
}

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

CSS，您可以使用position: absolute;，尽管这意味着还需要将...or添加到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的演示