javierdl Posted November 12, 2012 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 Link to comment Share on other sites More sharing options...
DarkxPunk Posted November 12, 2012 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 Link to comment Share on other sites More sharing options...
Wolverine Posted February 5, 2013 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 Link to comment Share on other sites More sharing options...
callumacrae Posted February 5, 2013 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 Link to comment Share on other sites More sharing options...
PhilOfPerth Posted February 6, 2013 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. Link to comment Share on other sites More sharing options...
callumacrae Posted February 6, 2013 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. Link to comment Share on other sites More sharing options...
Wolverine Posted February 6, 2013 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> Link to comment Share on other sites More sharing options...
callumacrae Posted February 6, 2013 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. Link to comment Share on other sites More sharing options...
Wolverine Posted February 6, 2013 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now