Providing Solutions For Web Development Languages and Platforms

Before After CSS Pseudo Elements Show Magical Effects

Before After CSS Pseudo Elements

::before, ::after in CSS are the Pseudo Elements whose implementation shows Magical Effects.

before element inserts content before the selected element. While on the other hand, after element inserts content after the selected element.

Magical in these insertions is the hidden effect. By hidden, you can say that it will not show up in html and also will not be present in DOM. But, still be a part of the content either before html or after html.

CSS before Syntax


selector:before{
    css declarartions;
}
OR
selector::before{
    css declarartions;
}

CSS after Syntax


selector:after{
    css declarartions;
}
OR
selector::after{
    css declarartions;
}

Both after and before elements uses content property to describe the content to show.

Uses of before after CSS


You can use before and after css element for multi purposes. Here are some of the uses that can satisfy most of your needs.

  • You can set background color, background image or background gradient before or after the element depending upon your needs to beautify the element.
  • You can also set some precious content to show before or after elements.
  • A repeating element can be targeted by its selector to make some common content to come after/before of all elements.
  • Some icons can also be applied before/after the element to make it look better and have a perfect CSS Layout

Browser Support


Here is a table for browser versions which fully supports ::before and ::after as a selector.

Selector Chrome Edge Firefox Safari
::before 4.0 9.0
Somewhat from 8.0
3.5 3.1
::after 4.0 9.0
Somewhat from 8.0
3.5 3.1

Examples for before css and after css


These descriptive examples you can directly implement in your project work.

Create a blockquote of the normal text

Have a look at the text without use of any pseudo element ::before/::after

Now, We will use ::before css pseudo element to make it blockquote. Have a look at the code below to make it happen.


p::before {
    content: "";
    border-left: 3px solid #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

Above code will make it a blockquote that looks pretty than default ones. See its beauty

Set an Important text using after CSS

If you want to set an important text or catchy content after your original html content. Use ::after css Pseudo Element to do so.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Code behind above Red colored Catchy text is down below. It’s much simple to implement.


p::after {
    content: "DUMMY TEXT";
    color: red;
    border: 2px solid;
    padding: 2px;
}

Target Same elements to add icon using before CSS

Suppose you creates a list of elements and all you need to add an Icon before all list items. See the list below which needs beautification.

  • Lorem Ipsum is not simply random text.
  • The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”
  • Lorem Ipsum is therefore always free from repetition

Here are 3 list items. So instead of applying individual item with an icon. Use before CSS as below.


ul li::before {
    content: "\002714 ";
}

Output will be as expected.

  • Lorem Ipsum is not simply random text.
  • The first line of Lorem Ipsum, “Lorem ipsum dolor sit amet..”
  • Lorem Ipsum is therefore always free from repetition

A pretty good use of Icons using pseudo elements – before and after is implemented by Nicolas Gallagher.

Use CSS before to clear Floats

Go through this use, if you are familiar with CSS floats instead invest 2 minutes in understanding CSS floats by clicking here.

As To have a better CSS Layout, we use floats. But sometimes, it might create overlap issues. It can be solved by using ::before css to clear floats.

This code can easily make floats clear and helps to have a normal flow of further content without floating. Just add below code before the paragraph or content you don’t want to float with previous float element.


p::before {
    content: "";
    display: block;
    clear: both;
}

Tricky clearfix that we described in our CSS float article also uses ::before css to clear floats

Know More About Pseudo Elements

Leave a Reply

%d bloggers like this: