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(hello@email.com)

Want this instead:

Email me

(hello@email.com)

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

score 3 · Accepted Answer · answered Oct 15 '12 at 05:37

3

Try this -

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

Demo

answered Oct 15 '12 at 05:37

Dipak

11,930
1
30
31

3

@calebo: You didn't use the code Dipaks suggested: http://jsfiddle.net/qesRk/1/ Or are you saying it works on screen but not print? – Wesley Murch Oct 15 '12 at 05:59

score 1 · Answer 2 · answered Oct 15 '12 at 05:32

1

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

answered Oct 15 '12 at 05:32

jamesplease

12,547
6
47
73

doesn't work for print style, if i add display: block to the pseudo class :after, it doesn't get picked up. – calebo Oct 15 '12 at 05:36

score 1 · Answer 3 · answered Oct 15 '12 at 07:08

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

(hello@email.com)

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:hello@email.com)

For this, given the markup <a href="mailto:hello@email.com">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).

Print CSS URL on new line

3 Answers3