Question

在我的website上，我收到了一些链接到各种服务的图片。今天，我想在图像下添加服务名称。该名称已经在anchor-tag的title-attribute中，所以我认为这应该很容易。我试过这样的话：

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;
}

...或者，您可以使用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

通过以下方式在下一行添加title-attribute

1 个答案: