Welcome to WebmasterWorld Guest from 50.17.79.100

Forum Moderators: not2easy

Message Too Old, No Replies

Styling :after{content:" "}

     

ocon

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

5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

5+ Year Member Top Contributors Of The Month



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)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



@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)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)

10+ Year Member




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)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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
or
: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)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



<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)

5+ Year Member Top Contributors Of The Month



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

Featured Threads

Hot Threads This Week

Hot Threads This Month