Skip to Main Content

13 examples of Pseudo-Elements With Custom CSS with the help of Elementor Pro

before and after Pseudo-Elements are really good ways to add style to the Elements without the need for Extra Markup you don’t need.

With the help of Elementor Pro: Custom CSS functionalities, whatever CSS you're writing and will reflect directly to the editor itself in real-time that makes it super easy and faster and productive.

Basic Requirement

  1. CSS I have provided below is not minified yet, you can minify online for better performance or if you are using Visual Studio Code, you can install Minify extension and minify the code or Install any of the plugins I listed on my remove unused CSS tutorials
  2. You have to write your own media Queries if needed. Watch the video below to learn more.
  3. For browser compatibility, head over to Autoprefixer CSS.
  4. Learn how to how to add CSS classes to an elementor's widget.
Choose Advanced Plan resized
Make Your Design Stand out With Elementor Advanced Plan

If you're following any of these tutorials, you will need Elementor advanced plan, if you haven't upgraded it yet, please use my Affiliate link, this commission comes at no additional cost to you but it will keep the website a little help and write more compressive tutorials for you.

Using ::before and ::after pseudo-elements is an excellent way to enhance the style of elements without the need for additional markup. If you’ve come across a visually appealing design, chances are it utilizes these pseudo-elements.

Now, you might be wondering if you can leverage these elements with the free version of the Elementor plugin.

The answer is yes, you can certainly use the free version without encountering any problems. However, for enhanced convenience and dealing with more complex tasks, upgrading to the Elementor Advanced plan is recommended. This is because the Advanced plan allows you to view the CSS, and also unlock custom CSS and code functionalities you’re writing in real-time, directly within the editor. This feature significantly streamlines the process, making it more efficient and productive.

In contrast, using the free version may take more time, and it might not be as productive compared to the Advanced plan. While there’s no pressure to opt for the Elementor Advanced plan, it’s essential to acknowledge the factual benefits it offers. Ultimately, the choice between the free and Advanced/ Pro plan depends on your individual needs and preferences.

Head up: If you enabled inline font icons Elementor experiments in Elementor’s features. The first and second methods will not work because they will replace icons with inline SVG.

Picture showing how to enabled Inline Font Icons Elementor's experiements

The “Inline Font Icons” will render the icons as inline SVG without loading the Font-Awsome and the eicons libraries and its related CSS files and fonts. Learn More about the Inline Font Icons Experiment in details.

Change the color & Increase the width and height of the icon

Elementor Button
Do you need the tutorials for this one? Of course not, this feature is already in-built with Elementor plugin from day one.

But can you change the color,size of the icon itself?

Not out-of-the-box though but you can with little bit of css. Follow this guide to learn more -
  1. Click the Elementor button handle
  2. Then Go to Button's Advanced tab
  3. Under Advanced tab - Choose CSS Classes and provide a unique class name for styling. (btn-color-icon) this is the CSS class I choose.

/*  
* The .btn-color-icon class is added to Elementor's button CSS classes.
* The .fa class represents font-awesome icons.
* The ::before or :before pseudo-elements are used to insert CSS or other content before and after elements.
* You can use custom properties for color instead of hex color.
*/
.btn-color-icon .fa:before {
    color: purple;
}

/* 
* If you have enabled the inline font icons experiment
*/
.btn-color-icon .elementor-button {
    fill: purple !important;
}

/* 
* Free tips: Adjust the width and height of the icon or SVG.
* Increasing the width and height may cause alignment issues, which can be fixed by adding align-items: center.
*/
.btn-color-icon .elementor-button-content-wrapper {
    align-items: center;
}

.btn-color-icon .elementor-button-icon svg {
    /*
    Default is 1em for width and height.
    To overwrite, we use the !important CSS rule.
    */
    height: 2em !important;
    width: 2em !important;
}

    
  

Change the font family from Font-Awesome to Elementor icons

To change the font-family from Font-awesome (FA) to Elementor icons (Eicons) libraries, we have to specify the font-family CSS property in the syntax.
Choose Icons from Font-awesome Libraries

This is how it looks when you add Font-Awesome icon directly from icon libraries in the frontend editors. 


/* 
    * This is the Code, Font-Awesome use it
    * .btn-color-fa is the CSS class, we have added to Elementor's button CSS classes
    *  .fa-long-arrow-alt-right is the CSS classes for calling font-awesome icons for font-awesome libraries.
    * ::before or :before is the before and after pseudo-elements to insert CSS or anything to the elements. 
*/

.bt-color-fa  .fa-long-arrow-alt-right:before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color:#000;
}
    
  

Now to change the FA font family to Eicons, we have to change the syntax from font-family: "Font Awesome 5 Free"; to font-family: "Eicons";


/* 
    * This is the Code, Font-Awesome use it
    * .btn-color-fa is the CSS class, we have added to Elementor's button CSS classes
    *  .fa-long-arrow-alt-right is the CSS classes for calling font-awesome icons for font-awesome libraries.
    * ::before or :before is the before and after pseudo-elements to insert CSS or anything to the elements. 
*/

.bt-color-fa  .fa-long-arrow-alt-right:before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color:#000;
}
    
  

Before

After

Design touch on background image

This CSS is inspired by Kevin Powell: YouTube Channel and from this post, I will demonstrate how to use it with the help of the Elementor Advanced plan.

This design can be useful for small touches, decoration, etc and you can see the demo and video below.

I highly recommend watching Kevin Powell’s video to fully understand the code.

To see the hover effects, you have to hover upon an image below.

The demo below is built with an Elementor HTML widget and you can copy and paste the HTML and CSS to your project, just make sure you change the path of the images

Page speed promotion
Hover me

Are you struggling with Core Web Vitals Performance?


<div class="decoration demo-style">
  <img width="1157" height="998" loading="eager" fetchpriority="high" decoding="async" 
  /* 
      * loading takes 3 attributes - lazy, eager and auto 
      * Fetch-priority hints takes 2 attributes low & auto 
  */
    src="/wp-content/uploads/2023/05/Page-Speed-Insightss-field-data-04-05-23.jpg.webp" srcset="
        /wp-content/uploads/2023/05/Page-Speed-Insightss-field-data-04-05-23.jpg 1157w, 
        /wp-content/uploads/2023/05/Page-Speed-Insightss-field-data-04-05-23-300x259.jpg 300w, 
        /wp-content/uploads/2023/05/Page-Speed-Insightss-field-data-04-05-23-1024x883.jpg 1024w, 
        /wp-content/uploads/2023/05/Page-Speed-Insightss-field-data-04-05-23-768x662.jpg 768w"
    class="wp-image-15680 dimage skip-lazy" alt="Page speed promotion" sizes="(max-width: 1157px) 100vw, 1157px">

  <div class="decoration-content-wrapper absolute">
    <span class="dspan">Hover me </span>
    <p class="dparagraph">Are you struggling with Core Web Vitals Performance?</p>
    <button role="button" class="dbutton">
      <a href="/contact-us/">Hire me</a>
    </button>
  </div>
</div>
    
  

/*
  * The .demo-style class defines custom properties for styling elements.
  * Custom properties include height, width, transition duration, background color, and foreground color.
*/
.demo-style {
    --_height: auto;
    --_fw: 560;
    --_transition: 450ms ease-in;
    --_bg: #FBA834;
    --_foreground: #333A73;
}

/*
  * The .decoration class sets up the styling for a decorative element, with a defined height and z-index.
*/
.decoration {
    position: relative;
    height: var(--_height);
    z-index: 1000;
}

/*
  * The .decoration-content-wrapper class positions and styles the content within the decorative element.
  * It includes flex properties for centering and adjusts the width and z-index.
*/
.decoration-content-wrapper {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 98%;
    z-index: 100;
}

/*
  * The ::before pseudo-element of .decoration-content-wrapper creates a background transition effect.
*/
.decoration-content-wrapper::before {
    position: absolute;
    content: '';
    height: 700px;
    width: 100%;
    transition: 
        background var(--_transition),
        opacity var(--_transition);
}

/*
  * Styling for various text elements with transitions for opacity, transform, color, and background-color.
*/
.dspan {
    font-size: var(--heading-one);
    font-weight: var(--_fw);
    color: var(--_foreground);
    text-align: center;
}

.dparagraph {
    color: var(--_foreground);
    opacity: 0;
}

.dbutton {
    width: 50%;
    border-radius: 50px;
    height: 50px;
    margin: 0;
    text-transform: uppercase;
    font-weight: var(--_fw);
    letter-spacing: 2px;
    transition: 
        opacity var(--_transition), 
        transform var(--_transition), 
        background-color var(--_transition), 
        color var(--_transition);
    pointer-events: none;
    border: none;
    text-decoration: none;
    opacity: 0;
}

.dbutton a {
    text-decoration: none;
}

/*
  * Styling changes on hover for .decoration and its child elements.
*/
.decoration:hover .dbutton {
    color: var(--_bg);
    background-color: var(--_foreground);
}

.decoration::after,
.decoration::before {
    content: '';
    position: absolute;
    height: 90%;
    top: 5%;
    bottom: 14em;
    left: 2%;
    right: 2%;
    opacity: 1;
    z-index: 1;
    transition: transform var(--_transition);
    --_border: var(--_bg);
}

.decoration::before {
    border-top: 3px solid var(--_border);
    border-bottom: 3px solid var(--_border);
    transform: scale(0, 1);
}

.decoration::after {
    border-left: 3px solid var(--_border);
    border-right: 3px solid var(--_border);
    transform: scale(1, 0);
}

.decoration:hover::before {
    transform: scale(1.015, 1);
}

.decoration:hover::after {
    transform: scale(1, 1.05);
}

.decoration:hover .dparagraph {
    opacity: 1;
}

.decoration:hover .dbutton {
    opacity: 1;
    pointer-events: auto;
    z-index: 3;
}

.decoration:hover .dbutton a {
    color: var(--_bg);
    cursor: pointer;
}

.decoration:hover .decoration-content-wrapper::before {
    background: #fff;
    opacity: 0.7;
}
    
  

Elementor Pro: Portfolio - Custom label

Category Label with Pseudo-elements
Follow the process
  1. Head over to the Portfolio widget.
  2. Then click the Portfolio widget Advanced tab
  3. Under Advanced tab – Choose CSS id/ Classes (You prefer).
  4. You know the step after that
To understand the CSS properly, you need to learn the CSS FlexBox property first. So you will understand what is going on.

.portfolio .elementor-portfolio__filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative;
    margin-bottom: 0;
    z-index: 1;
}

/* 
* box-shadow to all the post images
*/
.elementor-posts-container .elementor-post {
    -webkit-box-shadow: #3539411c 0 10px 40px 0;
    box-shadow: #3539411c 0 10px 40px 0;
}

.portfolio .elementor-portfolio__filters::before {
    /* Replace the content*/
    content: "'Category' Label are added with Pseudo-elements";
    color: #000;
    font-size: .95rem;
    position: absolute;
    right: 0;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    bottom: 0;
    z-index: -1;
}

@media(max-width:768px) {
    .portfolio .elementor-portfolio__filters::before {
        font-size: 1rem;
        right: 0%;
        top: -20px;
        font-weight: 600;
    }
}

@media(max-width:480px) {
    .portfolio .elementor-portfolio__filters {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin: 20px 0 0;
        padding: 10px 0 10px 0;

    }
}
    
  

As CSS Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:


.top .elementor-button {
    position: relative;
}


.top .elementor-button:hover::after {
    content: 'Surprise';
    position: absolute;
    display: inline-block;
    background-color: Blue;
    color: #000;
    padding: 20px 60px;
    /*
    * Adjust as per your requirements
    */
    margin: -108px -100px;
    font-size: 1rem;
}
    
  

When your mouse pointer hovers over to Official Elementor’s navigation menu on the official Elementor’s website we see a small triangle with white color.

If you want to achieve the same things, you can use the code below.


.top .elementor-button:hover::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 50%;
    margin-left: -5px;
    border-width: 8px;
    border-style: solid;
    border-color:
        currentcolor transparent transparent transparent;
}
    
  

When you hover any link on my website or the menu after you click the Hamburger menu. You get nice hover effects or animated underline effects. You can experience the same thing on all my links too.

This can be done with simple CSS and you will get tutorials from specky boy.

I reuse the Kinsta hover effects on all my links


/* 
  * Your CSS class may varies but the process is all the same
  * In this example, I am targeting only my single post template 
  * single-post-link is the parent container that wrap around all the content  
* Change the Color Hex code to any color 
*/

:root {
    --site-transition: 300ms ease-in-out;
    --color: red;
}
.single-post-links a {
    background-image:
        linear-gradient(transparent calc(100% - 1px), var(--color) 1px);
    color: var(--color);
    background-position: 100%;
    background-repeat: no-repeat;
    position: relative;
    text-decoration: none;
    transition: background-size var(--site-transition);
    background-size: 100% 100%;
}

/* 
  * when hover
*/

.single-post-links a:hover {
    background-size: 0 100%;
}
    
  

Added Icons to Headings

Display Font-Awesome icons before & after the heading widget

Do you know you can add font awesome icons before and after using FontAwesome?

This example you’re seeing in the video is not entirely done with before and after pseudo-elements but you can achieve it pretty easily.

See the video below for the demonstration-


/* 
  * Before heading
  * It will not work if you enabled inline font icons
  * See the sub heading for demo
*/

.fa-icon .elementor-heading-title {
    position: relative;
}

.fa-icon .elementor-heading-title::before {
    content: '\f641';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 20px;
}


/* 
  * After heading
*/

.fa-icon .elementor-heading-title::after {
    content: '\f641';
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    padding-right: 20px;
}
    
  

Elementor icons or eicons to display before or after

Have fun with Elementor icons (eicons) too if you know the CSS.


/* 
* Before heading
*/
.icons .elementor-heading-title{
    position: relative;
}

.icons .elementor-heading-title::before{
    content:'\e801';
    font-family: 'eicons';
    padding-right:5px;
}

/* 
* After heading
*/
.icons .elementor-heading-title::after{
    content:'\e801';
    font-family: 'eicons';
    padding-left:5px;
}
    
  

Added Icons to Post Title in WordPress

I wrote an article on Quora on how to add an icon to post a title in WordPress, it is well documented in my opinion. Go check the page on how to implement your projects.

Add title to a Post Title in WordPress

As a Badge

Have you ever thought of using it as a badge like if there is a notification?

This is the question asked on Facebook today on how to do it, most of the answers were straight on the point. For starters, this can overwhelm you but if you follow this process you can do it but you will still need to adjust it though.

Badge

Follow the 4 steps to apply CSS classes and style to WordPress menu items 

Now select the navigation menu items you want to add the badge and add CSS class (shown in the picture below).

Add a span class of “nav” or any preferred.

if you don’t want a screen reader to read like “Our Mission New” you can add “aria-hidden=”true” ” to the span itself to skip “New“.

Adding Accessibility functionalities to the nav meu items


Our Mission <span aria-hidden="true" class="nav">New</span>
    
  

Step 1: Select the Menu

When you choose the Nav Menu widget, you will see the unstyled version (in the picture below) first because we haven’t styled it yet but we will.

Badge were unstyled

Step 2: Click the WordPress menu's handle and add the CSS class

We added this CSS class not to get conflict with other CSS classes or rules so it doesn’t get overwritten.

nav Menu CSS class

Step 3: Add Custom CSS to the WordPress menu custom CSS area


/*
  * nav-menu is the CSS class we defined in Elementor CSS classes
  * Nav is the CSS we define in Appearence - Menu 
*/
.nav-menu .elementor-item{
    position: relative;
}

.nav-menu .elementor-item .nav{
    position: absolute;
    right:0;
    top: -5px;
    background-color: #000;
    border-radius: 30px;
    width: 45px;
    font-size: .8rem;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
    
  

Result

Adding Custom CSS to the navigation menu widget area

Step 4: Live badge

By using before and after pseudo-elements CSS we can add the live badge features and then we can animate with @keyframes CSS.


.live-badge::before{
    content:'';
    color: red;
    position: absolute;
    left:5px;
    top:5px;
    background: red;
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
    
  
before and after badge css

To animate the red dot, we need to add keyframes. So we had over to Animista – CSS animations on Demand this is my favorite CSS animation site.


.live-badge::before{
    content:'';
    color: red;
    position: absolute;
    left:5px;
    top:5px;
    background: red;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    /* We define the animation name as heart heartbeat*/
     -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
	        animation: heartbeat 1.5s ease-in-out infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-10-22 22:8:1
 * Licensed under FreeBSD License.
 * See https://animista.net/license for more info. 
 * w: https://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
    
  
Related-
  1. If you’re facing a Layout shift issue on your navigation Sub-menu icon when you load the page. Follow my How to Fix the Submenu icon indicator delay? article.
  2. Navigation is broken when you update Elementor! Here is how to troubleshoot and fix the nav menu bug.

Fixing Sub-menu delay

Buy this template Tutorials Discuss Want to use this template on your website? Purchase Today > Summarize your business so

Hover effects

You can achieve amazing hover effects with before and after pseudo-elements. Here is the Codepen you can check out and it is created by me.

Partial Underline color effects to the heading tag

Partial Underline effects with linear gradient and before & after pseudo-elements

If you want to do the same thing to your headings, you can achieve the same things with before and after pseudo-elements or by using a linear gradient.

Step 1: Give A CSS class to heading widget

Partial Underline effects with color

Step 2: Add CSS to the Custom CSS area

Adding CSS to custom CSS area

/*
  * Global Style
*/
:root {
  --heading-color: #fbfbfb;
  --underline-clr-bg: blue;
  --font-weight: 800;
}

/* 
  * Heading Style
  * This CSS can look weird, if you have long text
*/

.partial_bg_heading .elementor-heading-title{
  color: var(--heading-color);
  font-weight: var(--font-weight);
  background: linear-gradient(
    to bottom,
    transparent 60%,
    var(--underline-clr-bg) 60%);
  background-repeat: no-repeat;
}
    
  

If you’re using Unlimited Elements (UE) for Elementor, you can download and import my UE widgets file from my store for free.

Fancy Text with Unlimited elements for elementor

If you have other examples and want to contribute, please consider using comments.

Thank you

Reference :

  1. http://snifflevalve.com/elementor-tutorials/elementor-pro-portfolio-widget-filter-bar-label/
  2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  3. https://codepen.io/mxttsco/pen/KgodYm
  4. https://speckyboy.com/underline-text-effects-css/

Leave a Reply

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