{"id":69102,"date":"2019-08-08T04:19:46","date_gmt":"2019-08-08T11:19:46","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/08\/the-lowdown-on-before-and-after-in-css\/"},"modified":"2019-08-08T04:19:46","modified_gmt":"2019-08-08T11:19:46","slug":"the-lowdown-on-before-and-after-in-css","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/08\/the-lowdown-on-before-and-after-in-css\/","title":{"rendered":"The Lowdown on :before and :after in CSS"},"content":{"rendered":"

We previously took a look at :active<\/a>, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we\u2019re going to take a step back and explore some other \u201cpseudo\u201d items, this time we\u2019ll be looking at the pseudo-elements :before and :after.<\/p>\n

You\u2019re probably beginning to see these used all over the web in advanced CSS examples so you might as well jump in and learn to use them yourself.<\/p>\n

What is a pseudo-element and how does it differ from a pseud-class? Why do pseudo-elements sometimes have one colon and sometimes have two?<\/p>\n

How are :before and :after implemented in CSS? What are some ways that developers all over the web are using these tools to perform amazing feats of modern coding?<\/p>\n

Read on to find out.<\/p>\n

<\/span><\/p>\n

Pseudo-Classes vs. Pseudo-Elements<\/h2>\n
\"screenshot\"<\/div>\n

This is a super confusing little piece of semantics that lots of people seem to be mixed up about (myself included before diving into the research). If you run a quick Google search to find the difference between the two, you\u2019ll find longwinded and overly technical responses mixed in with simple, uninformed statements that the two are in fact different, with no discussion as to how or why.<\/p>\n

Some sources, such as W3Schools, seem to use the terms interchangeably, which often results in incorrect usage. The answer though is pretty simple if you break it down.<\/p>\n

Pseudo-Classes: Target Whole Elements<\/h3>\n

First, let\u2019s look at pseudo-classes, which target complete elements or element states.<\/p>\n

\n
a:link {color: #111}\na:hover {color: #222}\ndiv:first-child {color: #333}\ndiv:nth-child(3) {color: #444}<\/pre>\n<\/div>\n
As you can see, though these conditions aren\u2019t necessarily based on the DOM, the resulting selection is a complete element in every case. What is ultimately styled is an entire link element, paragraph, div, etc. <\/p>\n
Pseudo-Elements: Target Element Sub-Parts<\/h3>\n
Pseudo-elements, on the other hand, select sub-parts<\/em> of an element. This is an important distinction, here are some examples:<\/p>\n
\n
p::first-line {color: #555}\np::first-letter {color: #666}\na::before {content : \"hello world\";}<\/pre>\n<\/div>\n
As you can see, all of these target only a part of an element: the first line or letter of a paragraph for instance. These also have the amazing ability to target and even add to things that aren\u2019t even specified in your HTML, which is exactly what :before and :after, the topic of today\u2019s discussion, do for us. <\/p>\n
To read more about the differences between pseudo-classes and pseudo selectors, I highly recommend that you check out UMD<\/a> for a nice and thorough explanation with plenty of examples.<\/p>\n
:before vs. ::before<\/h2>\n
\"screenshot\"<\/div>\n
Before we jump into what :before and :after actually do in CSS and how you can use them to accomplish some cool stuff, let\u2019s clear up one more major point of confusion. If you look around the web for examples of :before and :after in use, you\u2019ll find two different syntaxes.<\/p>\n
Sometimes developers will use a single colon, other times they\u2019ll use two. Do the two perform different functions? Not at all, it turns out they\u2019re exactly the same from a functional perspective, meaning both will achieve the same result and are used for the same purpose. So why the difference? Here\u2019s an example:<\/p>\n
\n
\/*CSS2*\/\n.example:before {}\n.example:after {}\n.example:first-child {}\n\n\/*CSS3*\/\n.example::before {}\n.example::after {}\n.example:first-child {}<\/pre>\n<\/div>\n
As you can see, in CSS2, we used a single colon to represent both pseudo-classes and pseudo-elements. However, to help differentiate between the two, CSS3 includes a second colon only on pseudo-elements<\/strong>.<\/p>\n
IE Ruins Everything, Again<\/h3>\n
So why do we still see both syntaxes in modern examples and tutorials? Are some developers just ignorant of the change? That might be the case, but the likely answer for most of these inconsistencies lies with our old friend Internet Explorer, destroyer of all things new and good in the world of web development.<\/p>\n
It turns out that all modern<\/em> browsers accept the double colon syntax, but sadly, IE8  does not. For this reason, when coding with ::before and ::after, most developers opt for compatibility over convention and simply use the CSS2 single colon syntax. To keep things simple and consistent, we\u2019ll stick with this more widely compatible syntax for the rest of this discussion. <\/p>\n
What Are :before and :after?<\/h2>\n
\"screenshot\"<\/div>\n
That was a lot of groundwork but it\u2019s all necessary to know when you\u2019re going into a discussion on using :before and :after in CSS. Now we can finally jump in and see how these things work. <\/p>\n
The concept here is actually really simple. Both :before and :after allow you to actually add to your HTML elements from your CSS without cluttering your presentational markup. This opens up a lot of possibilities for adding little decorative elements that don\u2019t necessarily merit extra markup.<\/p>\n
For instance, let\u2019s say you have a few phone numbers throughout your site and would like to place the ? icon in front of them. You can use the :before pseudo element to do just that:<\/p>\n
\n
.phoneNumber:before {\ncontent:\"☎\";\nfont-size: 15px;\n}<\/pre>\n<\/div>\n
This code will actually insert the little icon before every element marked with the .phoneNumber class. The :after code works exactly the same way only, as you can guess, it will place the icon after the phone number. <\/p>\n
\n
.phoneNumber:after {\ncontent:\"☎\";\nfont-size: 15px;\n}<\/pre>\n<\/div>\n
A Brief Example<\/h2>\n
\"screenshot\"<\/div>\n
One reason that :before and :after have become so incredibly popular lately is for their ability to dramatically increase the complexity of pure CSS design elements. Without any additional markup, we can use these pseudo elements to add in additional style-able elements and layers. <\/p>\n
To see how this works, let\u2019s style a simple button. These are the basic styles that style the .button class to be round with a red gradient:<\/p>\n
\n
.button {\n  height: 100px;\n  width: 100px;\n  position: relative;\n  margin: 50px;\n  color: white;\n  text-align: center;\n  line-height: 100px;\n  \n  \/*Rounded Corners and Shadows*\/\n  -webkit-border-radius: 100px;\n  -moz-border-radius: 100px;\n  border-radius: 100px;\n  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n  box-shadow: 2px 2px 4px rgba(0,0,0,0.4);\n\n  \/*Ridiculous Gradient Syntax*\/\n  background: #e51d16; \/* Old browsers *\/\n  background: -moz-linear-gradient(top,  #e51d16 0%, #b21203 100%); \/* FF3.6+ *\/\n  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); \/* Chrome,Safari4+ *\/\n  background: -webkit-linear-gradient(top,  #e51d16 0%,#b21203 100%); \/* Chrome10+,Safari5.1+ *\/\n  background: -o-linear-gradient(top,  #e51d16 0%,#b21203 100%); \/* Opera 11.10+ *\/\n  background: -ms-linear-gradient(top,  #e51d16 0%,#b21203 100%); \/* IE10+ *\/\n  background: linear-gradient(top,  #e51d16 0%,#b21203 100%); \/* W3C *\/\n  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51d16', endColorstr='#b21203',GradientType=0 ); \/* IE6-9 *\/\n}<\/pre>\n<\/div>\n
Amazingly enough, all of this work will result in a fairly plain looking circle button:<\/p>\n
\"screenshot\"<\/div>\n
Now, let\u2019s say we want to add a slightly darker area outside the button and give it an inner shadow so the whole thing looks slightly inset. Rather than adding extra markup, we can simply use an empty pseudo-element.<\/p>\n
\n
.button:before {\n  content:\"\";\n}<\/pre>\n<\/div>\n
Now we can style this to add the desired effect. This is the basis for many of the fancy, difficult to wrap your mind around CSS styling tutorials you see on the web today. <\/p>\n
\n
.button:before {\n  content:\"\";\n  width: 100%;\n  height: 100%;\n  display: block;\n  z-index: -1;\n  position: relative;\n  padding: 15px;\n  background: #ddd;\n  left: -15px;\n  top: -15px;\n  -webkit-border-radius: 100px;\n  -moz-border-radius: 100px;\n  border-radius: 100px;\n  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);\n  -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);\n  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);\n}<\/pre>\n<\/div>\n
Now our button has a little bit more dimensionality to it. The :before pseudo-element is evident in the outer ring. We gave it a z-index of -1 to drop it behind the button and used absolute positioning to nudge it into place. <\/p>\n
\"screenshot\"<\/div>\n
Now let\u2019s say we wanted to do the same thing one more time. This go around we can access the :after pseudo-element and repeat the process.<\/p>\n
\n
.button:after {\n  content:\"\";\n  width: 100%;\n  height: 100%;\n  display: block;\n  z-index: -2;\n  position: relative;\n  padding: 25px;\n  background: #eee;\n  position: absolute;\n  left: -25px;\n  top: -25px;\n  -webkit-border-radius: 100px;\n  -moz-border-radius: 100px;\n  border-radius: 100px;\n  -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);\n  -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);\n  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);\n}<\/pre>\n<\/div>\n
This simply adds in another layer. Now our button appears to have a double inset from the top canvas:<\/p>\n
\"screenshot\"<\/div>\n
What Else Can You Do With :before and :after?<\/h2>\n
By now you should know quite a bit about :before and :after and how they are being used in modern web design. It turns out though that the rabbit hole goes deeper still, these pseudo-elements are being used for all kinds of crazy stuff. Here are a couple of popular uses that you should know about: <\/p>\n
Micro Clearfix<\/h3>\n
\"screenshot\"<\/a><\/div>\n
Who doesn\u2019t love a good clearfix? CSS floats can be a real pain (they break the fifth commandment and aren\u2019t nice to their parent elements) and developers everywhere are constantly looking for a better way to clear them.<\/p>\n
Nicolas Gallagher<\/a> came up with what appears to be the current favorite clearfix hack, which utilizes :before and :after in a creative way.  <\/p>\n
\n
\/* For modern browsers *\/\n.cf:before,\n.cf:after {\n    content:\"\";\n    display:table;\n}\n\n.cf:after {\n    clear:both;\n}\n\n\/* For IE 6\/7 (trigger hasLayout) *\/\n.cf {\n    zoom:1;\n}<\/pre>\n<\/div>\n
Here the :before pseudo-element prevents top-margin collapse and the :after pseudo-element is used to clear the floats. It\u2019s a pretty nifty solution that uses a lot less code than other notable cross-browser friendly attempts. <\/p>\n
Before you run off and leave a comment, I both know about and use the overflow: hidden<\/em> method. This is simply an alternative that\u2019s particularly helpful when the overflow trick isn\u2019t appropriate. <\/p>\n
CSS Shapes<\/h3>\n
\"screenshot\"<\/a><\/div>\n
Another really interesting use of :before and :after is to create complex shapes using pure CSS instead of images. This is accomplished through some really clever manipulation of borders along with some pseudo-element magic.<\/p>\n
CSS3Shapes.com<\/a> has some awesome examples of basic shapes that you can build using this method. For instance, here\u2019s the code for an octagon.<\/p>\n
\n
#octagon {\n   width: 100px; \n   height: 100px; \n   background: blue;\n}\n\n#octagon:before {\n   height: 0;\n   width: 40px;\n   content:\"\";\n   position: absolute; \n   border-bottom: 30px solid blue;\n   border-left: 30px solid white; \n   border-right: 30px solid white; \n}\n\n#octagon:after {\n   height: 0;\n   width: 40px;\n   content:\"\";\n   position: absolute; \n   border-top: 30px solid blue; \n   border-left: 30px solid white;  \n   border-right: 30px solid white; \n   margin: 70px 0 0 0;\n}<\/pre>\n<\/div>\n
As you can see, :before and :after are called, positioned and then given borders. This combines various simple shapes into complex ones. Pretty spiffy!<\/p>\n
Even More Pseudo-Element Goodness<\/h3>\n
If you\u2019re looking for even more crazy stuff to do with pseudo-elements, Chris Coyier has an awesome roundup of possible applications<\/a> on his site CSS-Tricks. <\/p>\n
Conclusion<\/h2>\n
By now you should pretty much be an expert on :before and :after in CSS. You should know the difference between pseudo-classes and pseudo-elements and why the latter is often seen with either a double or single colon. You should also know how :before and :after work on a basic level and have a good idea for how to use them to create some impressively advanced CSS voodoo. <\/p>\n
Leave a comment below and let us know if you learned anything. What other great tricks have you seen performed with pseudo-elements? <\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
We previously took a look at :active, an extremely handy pseudo-class selector that can be used to create some awesome mouse-down effects. Today we\u2019re going to take a step back and explore some other \u201cpseudo\u201d items, this time we\u2019ll be looking at the pseudo-elements :before and :after. You\u2019re probably beginning to see these used all… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":69103,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-69102","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t