Styling :after{content:" "}

Forum Moderators: not2easy

Message Too Old, No Replies

Styling :after{content:" "}

ocon

12:35 pm on Jul 15, 2013 (gmt 0)

I'm creating a printing stylesheet and I am using :after to insert link URLs.

@media print{
a:after{content:" ("attr(href)") "}
}

I like how the link text remains blue and underlined (default) but I'm not keen on the after content being blue and underlined too. Is there a way I can style the after content separately from the link?

I've tried adding span tags (content:"<span> ("attr(href)") </span>") in hopes that I could then isolate that part to style but the tags are treated like any other characters and just printed.

Fotiman

1:37 pm on Jul 15, 2013 (gmt 0)

Just add your additional style rules, though I don't know if you'll be able to remove the underline (text-decoration: none; didn't work in my test):


@media print{
 a:after{
  color: #000;
  content:" ("attr(href)") ";
 }
}

ocon

2:34 pm on Jul 15, 2013 (gmt 0)

Thank you! I was able to change the color but not remove the underline even with:

text-docoration:none!important

Strange, I wonder if that is how it is suppose to be or a bug?

DrDoc

3:52 pm on Jul 15, 2013 (gmt 0)

Personally, I consider inheriting anything from the anchor tag to be a bug. You are inserting content

after

the anchor tag, not into it.

That said -- I haven't verified my assumption with the specification ...

lucy24

3:56 pm on Jul 15, 2013 (gmt 0)

text-docoration:none!important

Please say that was a typo, or else the explanation will be all too easy. :)

Show me an "!important" and I'll show you a rule that's colliding with something later in the same CSS. View in a browser with a Web Inspector or similarly named feature to see where each style attribute is coming from.

Fotiman

3:58 pm on Jul 15, 2013 (gmt 0)

@DrDoc:

The CSS :after pseudo-element matches a virtual last child of the selected element.

- [developer.mozilla.org...]

Fotiman

4:10 pm on Jul 15, 2013 (gmt 0)

Try this:


@media print{
 a:after{
  display: inline-block;
  text-decoration: none;
  color: #000;
  content:" ("attr(href)") ";
 }
}

Paul_o_b

5:25 pm on Jul 15, 2013 (gmt 0)

You are inserting content after the anchor tag, not into it.

No, that is incorrect I'm afraid. You are inserting content after the content in that element and not after the element itself.

In the above example the href will follow the text that is inside the anchor and not after the closing tag of the anchor.

You can't turn the text-decoration off by addressing an inner element because the text-decoration is on the anchor itself (see caveat below).

Consider this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
span { text-decoration:none }
</style>
</head>

<body>
<p><a href="#thisis the url">Testing <span>Text in a span</span></a></p>
</body>
</html>

It is not the span that has the text-decoration it is the anchor that has the decoration. The text decorations are not technically inherited, but the effect is similar to inheritance as they are propagated to inline boxes (or anonymous inline if applied to a block element).

Any text decoration setting on a descendant box can never �undo� the text decorations of an ancestor box.

However:

The decorations are not propagated to floated or absolutely positioned descendants, or to descendant inline tables or inline blocks. Therefore adding display:inline-block as shown in the post above will remove the underline because it does not get propagated to those types of boxes. The text-decoration rule is superfluous in this case.

Unfortunately, all versions of IE get that wrong as far as generated content goes but will obey it to a nested span with the appropriate property.

DrDoc

7:08 pm on Jul 15, 2013 (gmt 0)

Indeed, I was mistaken.

*:after

content is inserted after the contents of the element to which it is attached, not after the element itself.

I blame the reason for this on the fact that I have found use for/reason to use

:before

:after

exactly zero times. I know, I know ... it's been popular in various hacks (as has

zoom: 1;

) -- I have just never needed to actually employ those hacks ...

lucy24

8:58 pm on Jul 15, 2013 (gmt 0)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
span { text-decoration:none }
</style>
</head>

<body>
<p><a href="#thisis the url">Testing <span>Text in a span</span></a></p>
</body>

But just to make things interesting, the opposite way works exactly as intended:

a {text-decoration: none;}
span {text-decoration: underline;}

I blame the reason for this on the fact that I have found use for/reason to use :before or :after exactly zero times.

.inukframe:before {padding-right: .5em; font-family: Pigiarniq, Uqammaq; content: "&#5120;";}
.inukframe:after {padding-left: .5em; font-family: Pigiarniq, Uqammaq; content: "&#5120;";}

... and I think that's the only place I've ever used it in real life ;) (The actual CSS has a character where the forums have inserted a decimal entity.)

No, wait, I tell a lie. I've got a fistful of these in one subdirectory:

span.music:before, span.music:after,
body.blue span.music:before, body.blue span.music:after
{padding: 0 .1em; content: url("/paintings/refrats/music/bluenote.gif");}
body.grey span.music:before, body.grey span.music:after
{padding: 0 .1em; content: url("/paintings/refrats/music/greynote.gif");}

ocon

12:38 am on Jul 16, 2013 (gmt 0)

Thank you all very much! The display:inline-block made it work. It was stripping my leading space, but I was able to fix that with

white-space:pre

@media print{a:after{content:" ("attr(href)")";color:#000;display:inline-block;white-space:pre}}