::before and ::after Pseudo Elements Explained With Examples

::before and ::after pseudo-elements are used to create elements positioned exactly before and after the content of the targeted elements, the term of pseudo means that this element doesn’t really exists in HTML structure, but will be generated by the browser (DOM) and will visible to user, so when we look at its source (right click » view source), we couldn’t find it, but when using inspect element (in Chrome – right click » inspect element), we’ll find it. Although doesn’t “real”, the use of these elements are same as other real elements (eq: when applying styles).

In Document Object Model (DOM) generated by a browser (eg: chrome), the positions of these elements looks like the following figure:

dom_structure_for_before_and_after_element

CSS SOURCE:

.gplus::before {
	/* Some styles */
}	
.gplus::after {
	/* Some styles */
}

HTML Source:

<div>
	<a class="gplus" href="#"></a>
</div>

Furthermore, when we add some content, the result is:

HTML:

<div>
	<a class="gplus" href="#">Visit our Google+ page now</a>
</div>

DOM Structure:

dom_structure_for_before_and_after_element_with_text

Writing Rules and Browser Support

Such as ::first-letter and ::first-line pseudo-elements, ::before and ::after pseudo elements already introduced in CSS 2, at that time, it written using a single colon (:before and :after), then the web evolved, these pseudo elements are added to CSS 3, writing rules added a double colon (::before and ::after), this is intended only to distinguish to pseudo-classes which uses a single colon (such as :hover, :link, etc.), but still, you can use single colon as well as double colon.

These pseudo-elements has been supported by major browsers, using either single or double colon colon, for Internet Explorer, the single colon available in version 8+, while the double colon in version 9+, therefore if you still consider to use IE 8, then use a single colon, otherwise double colon, as it’s the new standard and will be supported by further version of CSS.

CSS Properties for ::before and ::after Pseudo Elements

As mentioned earlier, although not real, these elements act like other real elements, so that we can implement various properties such as font-size, color, background, etc…, but note that in order to work properly, we MUST define content properties, though its value is empty. Types of values of content property are follows:

  • String, is just a plain text, no HTML codes or others, opened and closed by either single or double colon, for instance: content: 'Before Content' or content: "Before Content";
  • Keyword, is certain words that can be used, written without quotes, eg: content: open-quote;
  • Url, is the URL of image that will be used as a background, written without quotation marks, eg: content: url (../../some-image.jpg);
  • Attr, is an attribute value of the targeted element, written without quotation marks, for instance: a::before {content: attr (href)}, the content of ::before element will be the same as the value of the href attribute of <a> element.
  • Counter, an order of list of elements, eg: when using the <ol> element content: counter (li);

Various types of these values we will use further in the example section.

Type of Element

::before and ::after pseudo elements are categorized as inline element, same as <span>, <i> and others, so that by default don’t have dimensions, if we want to make the dimensions, we must first define the display property for the element, it can be: block, inline-block, table, or table-cell, for example:

HTML:

<article>
	<p>Content</p>
</article>

CSS:

article {
	width: 350px;
}
article p {
	border: 1px solid #CCCCCC;
	padding: 15px;
}
article::before {
	border: 1px solid #CCCCCC;
	content: "Element Before";
	padding: 15px;
}
article::after {
	border: 1px solid #CCCCCC;
	content: "Element After";
	padding: 15px;
}

Result:

Content

Then, when we add some dimensions properties (display, width, and height), the result will be:

CSS:

article p,
article::before,
article::after {
	display: inline-block;
	float: left;
	width: 80px;
	height: 80px;
	margin: 0;
	margin-right: 10px;
}

Result:

Content

In order to easy to remember, the use of these pseudo-elements is the same as using this HTML code:

<article>
	<span class="before"></span>
	<p>Content</p>
	<span class="after"></span>
</article>

From the above illustrations, expected that when you use these pseudo-elements, you can imagine html structure that will be generated, so it will be easier to you to style the elements.

Consideration

Now you know how these pseudo elements structured in the DOM, so when you want to add elements (HTML tags) in your HTML document, first to remember that we have two bonus elements, consider to using it, because it has many advantages especially when our code become more complex, as we add these elements to css code, we don’t need to change a lot of html code that we have written, just fix it in our single css file.

Real examples of the use of ::before and ::after pseudo elements

There are many situations where these elements come in handy, maybe the most useful one is to clear the floated element, as mentioned by Nicolas Gallagher in his post “A New Micro Clearfix Hack“. In addition here are some other examples, which hopefully can inspire you while designing a website.

Example #1: CSS Button With Icon

This is the common thing that we interested in, the button element. We might often see various links that contain an icon, mostly social media icon,  either animated or fixed, to do it, people usually add extra element to the link, but now this is easily done by using either :: before or :: after pseudo elements, or both of it, here’s an example:

Animated Icon

HTML:

<a class="anim-icon" href="#">
	<span></span>Animated Icon
</a>

DOM Structure:

css_button_with_animated_icon

Result:
Animated Icon

*) Red for ::before, and blue for ::after
Fixed icon

<a class="fixed-icon" href="#">
	Fixed Button
</a>

DOM Structure:
css_button_with_ficed_icon
Result:
Fixed Icon

*) Red for ::before, and blue for ::after
Standalone icon

HTML:

<a class="gplus" href="#"></a>

DOM Structure:

dom_structure_for_before_and_after_element

Result:

*) Red for ::before, and blue for ::after

Example #2: CSS Icon In Form

The use of ::before and :: after pseudo elements also often applied to a form, the following examples show the simple register form, search form, and login form (with html validation).

Register Form:

In the following example, the icons on the name and email input field are created using ::before pseudo element.

HTML:

<form class="form">
	<div class="name">
		<input name="name" type="text" placeholder="Name:">
	</div>
	<div class="email">
		<input name="email" type="text" placeholder="Email:">
	</div>
	<input class="button" type="submit" value="Submit">
</form>

DOM Structure:

styling_input_using_pseudo_element

Result:

*) Red for ::before, and blue for ::after

Search Form:

HTML:

<form method="post" action="" class="search" >
	<input type="text" value="" name="search" placeholder="Search...">
	<button type="submit" value=""></button>
</form>

DOM Structure:

dom_structure_for_search_input_with_icon

Result

*) Red for ::before, and blue for ::after

Form Validation:

In the form below, try to fill some name, email and url, if the format is invalid (not using @ in the email or the url not beginning with http://) it will display a cross icon right after input element, otherwise a green checkmark appear, the cross and checkmark icon is made using ::before and ::after pseudo elements. This example is taken from the article: CSS Pseudo Class For Input Element.

dom_structure_of_form_validation

Example #3: CSS For Radio and Checkbox

If we don’t like the checkboxes and radio provided by the browser, we can change it by adding some style, again this can be achieved using ::before and ::after pseudo elements. Noted that the result may look differ for different browsers, so far chrome is easier to style than others.

<div class="radio-checkbox">
	<label><input name="option" type="radio">Radio 1</label><br>
	<label><input name="option" type="radio">Radio 2</label><br>
	<label><input name="option" type="radio">Radio 3</label>
	<p>Checkbox:</p>
	<label><input name="checkbox1" type="checkbox">Checkbox 1</label><br>
	<label><input name="checkbox2" type="checkbox">Checkbox 2</label><br>
	<label><input name="checkbox3" type="checkbox">Checkbox 3</label>
</div>

DOM Structure:

dom_structure_of_styled_radio_checkbox

Result:



Checkbox:



*) Red for ::before, blue for ::after

Example #4: Styling Number in Ordered List Element

By default, we can’t change the style of number generated by <ol> element, so the number will be displayed “as is” – just flat, but now, using ::before pseudo-element we can do it with ease, here the “counter” value of content property come into play.

HTML:

<ol class="ordered-list">					
	<li><a href="#">1st Link</a></li>
	<li><a href="#">2nd Link</a></li>
	<li><a href="#">3rd Link</a></li>
	<li><a href="#">4th Link</a></li>
	<li><a href="#">5th Link</a></li>
</ol>

DOM Structure:

dom_structure_of_styled_list

The Result:

  1. CSS For Links (Anchor) Element
  2. Creating 13 Social Media Button With Cool Effect
  3. Understanding :nth-child and :nth-last-child Pseudo Class Selector
  4. Pseudo Classes For Input Elements – With Examples
  5. Understanding :nth-child and :nth-last-child Pseudo Class Selector

*) Red for ::before, blue for ::after

Example #5: Styling Quote

Another example that is when making a quote mark for a sentence, which is usually preceded by an open-quote character and ends with a close-quote, these quotes can be created using ::before and ::after pseudo elements.  This section discusses the use of content:url(). Because needs much explanation,  I  think it needs to be discussed separately, please visit to this page to read the article.

Example #6: Creating tooltip using CSS

The next example is creating a tooltip, as mentioned previously, by using content:attr we can get the value of particular attribute of targeted element, so in this example we will use content:attr(data-tooltip) to get the value of data-tooltip attribute of anchor element, then used it as tooltip content.

<a href="#" class="tooltip" data-tooltip="Example of tooltip">
	Sample link with tooltip
</a>

DOM Structure:

dom_structure_of_creating_tooltip_using_css

Result:
Sample link with tooltip

*) Red for ::before, blue for ::after

in the above example, we use ::before pseudo element as tooltip container and ::after pseudo element as the arrow.

BONUS

You can view all above example in a single html page so that you can view it clearly, or download it to learn the CSS code easily.

Conclusion

::before and ::after pseudo elements helped us a lot when work with HTML elements, because we don’t need to hard code “real” HTML elements (tags), so that when the things are changes, we simply edit the css file that corresponds to it, no need to edit huge html code which will potentially break your design.

Related Post

Leave a comment

Like Us

Social