Print CSS URL on new line

Question

For print styles, I am currently printing the url after the text. Is it possible to have it appear on the next line instead of next to the text? This is what I have so far.

a:after {
  content:" (" attr(href) ")";
}

Result:

Email me([email protected])

Want this instead:

Email me

([email protected])

Example: http://jsfiddle.net/qesRk/

Answer 1

Try this -

a:after {
    font-style: italic;
    content: "\A and some text after."; white-space:pre;
}

Demo

Answer 2

You could display: block; it, like on this JSFiddle

Answer 3

There are various ways to make the :after pseudo-element start on a new line, as shown in other answers. But the example in your question says that the desired rendering is

Email me

([email protected])

This cannot be achieved using just CSS if the the purpose is to that the address from the href attribute of a link. The reason is that a working href value would have to start with mailto:, and you cannot omit anything from the attribute value when using constructs like attr(href). What you can achieve is

Email me

(mailto:[email protected])

For this, given the markup <a href="mailto:[email protected]">Email me</a>, you would use

a:after {
        content: " (" attr(href) ")";
        display: block;
        margin-top: 1.2em;
}

assuming that you want an empty line too, as in your example. Replace 1.2 by the line-height value you are using.

P.S. This sounds unnecessarily complicated anyway. Using just the email address in content, optionally wrapped inside an a href element, would suffice, both on screen and on print. (On printing, you would normally want to suppress underlining of links, but that’s a general issue.) If you were thinking of preventing email address harvesters from getting the address from the content, putting the address into an attribute does not help much (they are easily processed by harvesters).