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:
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
</ul>CSS Code:
ul li::before { content: "\f054"; font-family: FontAwesome;}Let’s have a look on below screen.
Result:
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:
<h2>I have the background Image</h2>
CSS Code:
h2::after { width: 100%; height: 23px; content: ""; background: url("../images/separator.png") no-repeat center center; display: block;}Let’s have a look on below screen.
Result:
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:
<p>This is an example of Pseudo </p>
CSS Code:
p::after { content: "Elements"; display: inline-block;}Result:
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.
Example:
HTML Code:
<div class=”container”>
<div class=”left”>This is an example</div>
<div class=”right”>This is an example</div>
</div>CSS Code:
.container::after,
.container::before { content: ""; display: block;}
.container::after { clear: both;}
.left { margin-right: 15px; padding: 25px; width: 60%; float: left; background: #2a2a2a; color: #fff; text-align: center; min-height: 95px;}
.right { padding: 25px; width: 25%; float: left; background: #2a2a2a; color: #fff; text-align: center;}And here is the final result after applying clear property using Pseudo Elements:
Result:
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.
Example:
HTML Code:
<ul>
<li>
<img alt="Image" src="images/thumb.jpeg">
<p>Lorem Ipsum</p>
</li>
<li>
<img alt="Image" src="images/thumb.jpeg">
<p>Lorem Ipsum</p>
</li>
</ul>
CSS Code:
ul li { width: 49%; padding: 0 5px; display: inline-block; text-align: center; position: relative;}
ul li img { max-width: 100%; height: auto;}
ul li p { margin: 0; padding: 20px; background: #ffffff;}
ul li::after { height: 100%; content: ""; background: rgba(0,0,0,0.8); position: absolute; top: 0; left: 5px; right: 5px; opacity: 0;}
ul li:hover::after,
ul li:hover::before { opacity: 1; cursor: pointer;}
ul li::before { content: "Hover Text"; position: absolute; top: calc(50% - 12px); left: calc(50% - 40px); color: #ffffff; opacity: 0; z-index: 10;}Result:
I hope you have enjoyed the blog and applied some magic tricks in your projects.
