Jump to content

:before & :after Usage


javierdl

Recommended Posts

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 by DarkxPunk
Link to comment
Share on other sites

  • 2 months later...

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 by Wolverine
Link to comment
Share on other sites

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/

  • Like 1
Link to comment
Share on other sites

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. :Pleased: 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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...