javierdl 2 Report post 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 Share this post Link to post Share on other sites
DarkxPunk 13 Report post 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 Share this post Link to post Share on other sites
Wolverine 3 Report post 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 Share this post Link to post Share on other sites
callumacrae 7 Report post 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 Share this post Link to post Share on other sites
PhilOfPerth 0 Report post 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 Share this post Link to post Share on other sites
callumacrae 7 Report post 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 Share this post Link to post Share on other sites
Wolverine 3 Report post 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 Share this post Link to post Share on other sites
callumacrae 7 Report post 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 Share this post Link to post Share on other sites
Wolverine 3 Report post 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 Share this post Link to post Share on other sites
