Jump to content
javierdl

:before & :after Usage

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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>

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...