css-before-after

Imagine you're working on the project and you have access to only CSS files you cannot add any HTML elements whatsoever. This could be the case while working on bigger projects where some code is dynamically generated and you just need to tweak some styling using CSS.

Pseudo Elements are the dummy elements that do not exist inside DOM but it provides a way to add a nonexistent element and style them, around the selected element. There are two ways Pseudo-elements can appear in the document that is :after (::after) and :before (::before)

Its name clarifies at which place it can be used. ::before places itself before everything else in the selector and ::after places itself after everything else in the element. Meaning, ::before is the first element of the selector and ::after would be the last element inside the selector. Pseudo-elements can be used with non-self-closing tags.

Its CSS can simply be applied using a rule using: or :: ( New Browsers supports :: )

Using these simple pseudo elements we can add 2 more layers of styling to the selected HTML DOM element. The outcome that we can get with using these elements can be seen below.

CLICK ANYWHERE IN WINDOW

Basic Syntax

The syntax is really simple. Use it after the selector and add at least a content attribute to it.

/* CSS3 */
div::before{content:'';}
div::after{content:'';}
/* CSS2 */
div:before{content:'';}
div:after{content:'';}

Once the content attribute is added, the element will appear. This can be inspected by a chrome inspector.

before-after in inspector

This is not about it. Content property can take some other values than just a blank.

The accepted values are:

content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

  • normal: Default value (none)
  • none: Element doesn't appear.
  • counter: Can show increments of number
  • attr: Displays the value of any HTML attribute.
  • string: any string or unicode values and symbols.
  • open-quote|close-quote|no-open-quote|no-close-quote: Displays default quote symbol / removes quote symbol.
  • url: Loads image URL to display image.

There are some advantages and Disadvantages of using ::before and ::after.

Pros
  • Performance is Better in Transitions and animations
  • Easier to implement just using CSS
  • Can display combined CSS of two elements
Cons
  • Accessibility problem due to not being a DOM element
  • Only one (of each type) allowed per element
  • Not supported in old browsers

Why Use ::before & ::after?

If you don't want to modify HTML code, and some level of fine-tuning to your design, you can add ::before and ::after to insert dummy element on the main selector and combine the CSS.

Some of the practical practices used in the industry right now:

Titles: Adding decorations to Heading elements. Just by using pseudo-elements, we can draw a line or 2 lines, create gradient backgrounds, etc.

Bulleted Lists and Arrows: Adding Unicode bullets is way simpler using pseudo-elements. HTML ordered list and ordered list can have little facelift using the::before.

Clear: Clearing floats is a major thing in float-based layout. pseudo-elements are clearfix's best friend. using clearfix class is the easiest way to clear class till date.

Quotes: Can easily add quote symbols to the blockquote element or any element in general so content creators can just use standard blockquote syntax and the quote icon will appear without using any image.

External Links: Many sites use custom animated underlines to show external links. This is used on many sites to create engaging anchor texts.

Icons: Many font based icon libraries use pseudo-elements to display fonts. FontAwesome, Fontello uses these techniques in their library.

Forms: Most input fields can't have pesudo classes. But required asterisks * can be done with ::after element. Checkboxes and Radio Buttons can have custom designs just with some divs and CSS.

Image Overlays or Patterns: Most commonly used hero image with text on top uses the pseudo element to add dark / light overlays so text can be readable on any image.

Shapes: Some simple shares like a triangle, Circle, Rectangle can be drawn using these elements. Combine those basic shares together can you can create different designs.

Tooltips: If the default title tooltip is not good enough, there are plugins that use custom tooltip and data attributes to show custom tooltips using pseudo-element.

In My Demo : Flash Warning

I used one span element and ::before and ::after elements to recreate the trending Flash Warning Effect using CSS.

css before after box-model

To summarise, I have used an image and overlayed a span on top of the image. I am using animation keyframes to change transparency and background positions on pseudo-elements.

On click on the document, I am adding one class called flash to the body. and it triggers the Flash Animation. For more information on how to trigger css animation on scroll, you can check my other post.

I have created an experiment to measure the performance of CSS on actual DOM elements and pseudo-elements. Here are the results that might help you decide when to use these elements.

Using DIV:

I have used two div elements to apply looping animation. It was simple @keyframes animations and I measured the frame rate of the animation once it is clicked on. This was a simple animation but its duration is short, so it's a good experiment to measure the performance. Its frame rate reaches about 13FPS.

performance with divs

13FPS is considered as not so good as we're having devices capable of rendering 120 FPS without a problem.

Using ::before and ::after:

I have created a Flash Warning Demo using ::before and ::after I applied the animation loop with opacity, background-position, and filter properties. I have just measured the frame rate that I was able to get with this method.  It's averaging 31 FPS.

performance with before and after

This is nothing groundbreaking, but it's actually performing two times faster than DOM elements.

What's the verdict here?

With Looping Animation We get about twice as good frame rates using ::before and ::after. That means your animations and transitions will become more smooth while using pseudo-elements. (Most of the times)

What is the Difference between :before and :after

::before works like a ::first-child of the element. so I'ts properties will behave like a first child. this includes depth or z-index.

::after works like a :last-child of the element and will have the higher depth or z-index then ::before until overridden.

But technically there is no difference between them as they both have the same implementation.

Final Words

Using ::before and ::after will give you two additional elements to experiment with, While used correctly, can be extremely useful for various reasons. For me, I created a chrome ad-on to highlight links. and I was able to do so much just using these pseudo-elements as I didn't modify any HTML content. For ant Developer or Designer, This simple hack can do so much without touching any DOM element.

On the other hand, avoiding these elements won't hurt your design, as these are used mostly for decorations.

Leave a Reply

Your email address will not be published. Required fields are marked *