homepage Welcome to WebmasterWorld Guest from 50.17.176.149
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Styling :after{content:" "}
ocon




msg:4593216
 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




msg:4593227
 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




msg:4593253
 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




msg:4593272
 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




msg:4593274
 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




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

@DrDoc:

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

- https://developer.mozilla.org/en-US/docs/Web/CSS/::after

Fotiman




msg:4593280
 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




msg:4593298
 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




msg:4593322
 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 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




msg:4593345
 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




msg:4593401
 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}}
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved