javierdl 2 Posted November 12, 2012 Report Share Posted November 12, 2012 Hi all, I found this CSS feature while checking QuirksMode.org I never came across before. It seems interesting. I just can't think of a time when I would use it.Can anyone enlighten me? Thanks guys! JDL Quote Link to post Share on other sites
DarkxPunk 13 Posted November 12, 2012 Report Share Posted November 12, 2012 (edited) I could see it being useful if you want to add inline stuff to content based upon a class, rather than typing it in every time.For example.Image (auto generated content from say js) or,And repeat.Honestly I doubt anyone would really use it but you never know. Edited November 12, 2012 by DarkxPunk Quote Link to post Share on other sites
Wolverine 3 Posted February 5, 2013 Report Share Posted February 5, 2013 (edited) Well here is a sample of my idea of why these tags might be used. <!DOCTYPE html><html><head></head><body><p>My name is Donald</p><p>I live in Ducksburg</p><p><b>Note:</b> For :after to work in IE8, a DOCTYPE must be declared.</p></body></html><!DOCTYPE html><html><head><style>p:before{content:"Read this -";}<style>p:after{content:"- Remember this";}</style></style></head><body><p>My name is Donald</p><p>I live in Ducksburg</p><p><b>Note:</b> For :before to work in IE8, a DOCTYPE must be declared.</p></body></html> For example I am a TREK fan and set up on a web page I am working on at home:<style type="text/css">p:after{content:"LIVE LONG AND PROSPER!";}</style>and at the end of every paragraph LIVE LONG AND PROSPER! appears. Which is nice to make five sentences when you can't think of a fifth. Or you could use:<style type="text/css">p:before{content:"GPL v2";}at the beginning to show what license you use. Edited February 5, 2013 by Wolverine Quote Link to post Share on other sites
callumacrae 7 Posted February 5, 2013 Report Share Posted February 5, 2013 Aaand here's a practical application which I have used it for before. The above example is using :before incorrectly and should be ignored; you should just be adding that to the source, as you shouldn't be using CSS for content, only styling. Say we have a list of links which we want to be separated by a "|" symbol: Home | About | Contact We have the following HTML source: <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li></ul> Hard coding the pipe symbol would be ugly and tricky to maintain. We can use the following CSS: #menu li { display: inline;} #menu li:not(:first-child):before { padding-left: 6px; padding-right: 10px; content: '|'} We now have what we wanted in the first example. JSFiddle: http://jsfiddle.net/c2U3y/1/ 1 Quote Link to post Share on other sites
PhilOfPerth 0 Posted February 6, 2013 Report Share Posted February 6, 2013 Nice one, callumacrae.I'd never heard of :before and :after or not or {first-child until this topic. You just opened some new windows for me with this example. Where do we find things like the not{:first-child and similar magic? I've never seen them in the several books or tutorials I've read. Quote Link to post Share on other sites
callumacrae 7 Posted February 6, 2013 Report Share Posted February 6, 2013 I can't remember where I learned this stuff from, but I imagine that if you buy a good CSS book, it will cover it. I would recommend CSS3: The Missing Manual or CSS: The Definitive Guide. Pretty much any O'Reilly book would do the trick, though. Quote Link to post Share on other sites
Wolverine 3 Posted February 6, 2013 Report Share Posted February 6, 2013 Well here is where I got my idea for using it from:<code>http://www.w3schools.com/css/css_pseudo_elements.aspCSS - The :before Pseudo-element The ":before" pseudo-element can be used to insert some content before the content of an element. The following example inserts an image before each <h1> element: Example h1:before{ content:url(smiley.gif); } Try it yourself ยป--------------------------------------------------------------------------------CSS - The :after Pseudo-element The ":after" pseudo-element can be used to insert some content after the content of an element. The following example inserts an image after each <h1> element:</code> Quote Link to post Share on other sites
callumacrae 7 Posted February 6, 2013 Report Share Posted February 6, 2013 Again, that's a silly and unrealistic example. A practical example which is similar to that would be to insert an image before every external link warning the user that they would be leaving the site: img:not([href^="http://example.com"],[href^="/"]):before { content: url('./imgs/external.png');} Note: You should not use gifs, either. Quote Link to post Share on other sites
Wolverine 3 Posted February 6, 2013 Report Share Posted February 6, 2013 Note Callumacrae The gifs and the example came from the CSS tutorial on Pseudo Classes here at http://www.w3schools.com. Take it up with them if they use gifs or not. I just gave what their tutorial on Pseudo Classes said. Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.