Add title-attribute on next line via :after

Question

Hi,

on my website, I got a couple of images linking to various services. Today, I wanted to add the service-name under the image. The name is already in the title-attribute of the anchor-tag, so I thought this should be easy. I tried it like this:

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

The problem with that: The linebreak is ignored, the text is displayed inline. Is there any solution?

Answer 1

You can either use display: block to force the line-break, but this seems to require that the parent a is also display: block

a {
 display: block;
}

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

...or, you can use position: absolute;, though this means adding CSS to your a style definitions as well:

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

Demo added to JS Bin