5 CSS3 tricks with Pseudo Elements ::before and ::after

Overview

Most of the people think that there is no major difference between Pseudo Classes and Pseudo Elements, but there is one major difference that exists between these two.

Nowadays we all know that we have used these kind of classes and elements as a part of CSS3. The newly defined CSS3 presents such type of Pseudo Elements.

Difference between Pseudo Classes and Pseudo Elements

Pseudo Classes: Used as selectors that assists some selections that are not expressed by simple selectors. In a simple way we are able to do some kind of CSS effects using these types of classes that we can’t do with the particular selector.

For ex:, :hover, :active

Pseudo Elements: Used to create new elements that do not exist normally in document and they are manipulated as a normal selector.

For ex:, ::after, ::before

Here we can see there is one difference between these two and that is the use of “colon (:)”.

Yes for Pseudo Classes we have used single colon ( : ) and for Pseudo Elements we have used double colon ( :: ) which is one of the CSS3 syntax. Browsers support both types of syntax but in IE (version older than 9) do not support this double colon ( :: ) format.

The important property for Pseudo Elements is content: “ ”.

Values for content property are:

Content: ” ”
Content: ” any specific value ”

Let’s begin with some CSS tricks with Pseudo Elements:

Method 1: Pseudo Elements with Font Awesome

As per the latest web design trends most of the websites are now using Font Awesome to create iconic fonts rather than using images as  icons which increases the loading speed of any website.

Example:

HTML Code:

CSS Code:

Let’s have a look on below screen.

Result:

screenshot-1

Method 2: Pseudo Elements with Background

Have you ever tried to give a background image to any element using this kind of CSS? If not then just try the below code.

Example:

HTML Code:

CSS Code:

Let’s have a look on below screen.

Result:

screenshot-2

Method 3: Pseudo Elements with Content Property

This is the most interesting and amazing trick to do. Sometimes a situation occurs in which we have to add some text to any block and we are unable to do so. For this problem, here is the solution.

Example:

HTML Code:

CSS Code:

Result:

screenshot-3

Method 4: Pseudo Elements with Clear floats

What happens if we forgot to clears the float of two blocks? It may display the horrible results. Some latest browsers are intelligent which ignores these type mistakes but some browsers does not. So here is the solution for clear floats but before that check the below screenshot without clearing the floats.

screenshot-4

Example:

HTML Code:

CSS Code:

And here is the final result after applying clear property using Pseudo Elements:

Result:

screenshot-5

Method 5: Pseudo Elements with Overlay blocks on hover

Latest graphic design market offers us to do overlay blocks as a hover effect for some block elements. For that we can also use the pseudo elements as a part of our design, not physically but visually.

Here is the screenshot how blocks appear in designs.

screenshot-6

Example:

HTML Code:

 

CSS Code:

Result:

screenshot-7

I hope you have enjoyed the blog and applied some magic tricks in your projects.

Hitarthi Suthar

Hitarthi Suthar | Sr. Web Designer

I am a Sr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. I am passionate about my work as I like to explore new technologies and methods related to my profile. I am fond of craft and painting.
mm

Hitarthi Suthar Sr. Web Designer

Hitarthi was a Sr. Web Designer at Yudiz Solutions Pvt. Ltd. - a leading Web and Mobile Apps development company. She is passionate about her work as she like to explore new technologies and methods related to her profile. She is fond of craft and painting.

Comments are closed.

Top