10 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 need of Extra Markup you don’t need.

Pseudo-Elements
:before (::before)and :after (::after)Pseudo-Elements are really good ways to add style to the Elements without need of Extra Markup you don’t need and this can be use for very different purposes.

#1. Code I have provided below is not minified yet,you have to go to this website to minified your CSS for better performance.

#2. You have to write your own media Queries if needed.

#3. Disclaimer: This site contain an Affiliate Link, which means that if you buy, Foxscribbler will earn a small commission. This commission comes at no additional cost to you.

#4. For browser compatibility, you need to head over to Autoprefixer CSS online.

Examples using before & after pseudo-Elements

Can I use Free version of Elementor plugin ?

Yes, you can use free version of Elementor without any issues but when it comes with convinient purpose or any complicated stuff, you will need Elementor pro because you will see whatever CSS you're writing and it will reflect directly to the editor itself that makes it super easy and faster and productive.

Otherwise, if you use the Free version it can consume more and more time and it is not as productive as using Pro version. Round trips between Elementor editor to Customizer take time.

#1. Change the color of Elementor Button icon widget

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. Head over to Elementor button.
  2. Then Go to Button Advanced tab
  3. Under Advanced tab - Choose CSS id/ Classes (You prefer) and give a name for styling. (btn-color-icon) this is the CSS class I choose.
  4. Choose whicher you prefer for CSS id use 'Pound sign' or 'Hash' or '#' sign or if you are using CSS classes then use (.)
Change the color of the FA icon
I Choose CSS classes as "btn-color-icon" for that CSS, it will be .btn-color-icon = class name

.fa - That how FontAwesome use their name

.fa:before - that how Elementor add the fontAwesome icon with before and after pseudo-elements 
    
        
/* 
* .btn-color-icon is the CSS class, we have added to Elementor's button CSS classes
* .fa is the CSS classes for font-awesome icons.
*  ::before or :before is the before and after pseudo-elements to insert CSS or anything to the elements.
*/

.btn-color-icon .fa:before{
   color:purple;
}

#2. Change the font family from Font-Awesome to Elementor icons

Unlike, you can’t choose Elementor Icons (eicons) like you choose Font-Awesome icon from Icon libraries ( See the screenshot below) but we can specify eicons by replacing Font-family from ‘Font Awesome 5 Free to ‘Eicons‘ and content from ‘\f30b‘ to ‘\e837‘ in later.

This is how to insert FA icons or any icon libraries to Elementor’s button widget. Simply choose icon and choose icon library.

Choose Icons from Font-awesome Libraries

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

Button with FA icon 
    
        
/* 
 * 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, we swap out the Font-Awesome icon with Eicons by specifying the “font-family” as Eicons and the “content”.

    
        
/* 
 * .btn-color-eicon 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-eicon .fa-long-arrow-alt-right:before{
    content: '\e837';
    font-family: "Eicons";
    font-weight: normal;
    font-style: normal;
    padding-left: 4px;
    color: purple;
}
Button with Eicons

#3. Design touch on background image

This CSS is inspired by Kevin Powell YouTube Channel and in this post, I will going to demonstrate how to use it with the help of the Elementor pro.

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.

In order to see the hover effects, you have to hover upon image.

Hover me

7 examples of Pseudo-Elements With Elementor with css 3

The demo above is built with an Elementor HTML widget and you can copy and paste the HTML and CSS to your project.

				
					<!-- See the Sample below-->

<div class="decoration">
    <p class="decoration--paragraph">Hover me</p>
    <img
        class="decoration--image" 
        width="800" 
        height="522" 
        loading="lazy"
        src="/wp-content/uploads/2019/03/pexels-photo-297755-1024x668.jpg" 
        srcset="/wp-content/uploads/2019/03/pexels-photo-297755.jpg 480w,
                        /wp-content/uploads/2019/03/pexels-photo-297755-1024x668.jpg 768w,
                        /wp-content/uploads/2019/03/pexels-photo-297755-1024x668.jpg 1024w,
                        /wp-content/uploads/2019/03/pexels-photo-297755-1024x668.jpg 1536w"
     alt="7 examples of Pseudo-Elements With Elementor with css" 
    sizes="(max-width: 800px) 100vw, 800px" >
    <button role="button" class="decoration--button">Surprise</button>
    
</div>
				
			
				
					/*
* CSS custom Properties
* Please use Autoprefixer to add all the browser compaitability tag (Highly recommended
*  You still need to adjust CSS
*/


:root{
    --transition: 300ms ease-in-out;
    --clr-button:#ffce30;
    --clr-button-text:#304ffe;
    --clr-button-text-hover: #ffe485;
    --foreground: #fff;
    --fw: 600;
}

/* CSS*/

.decoration{
    position: relative;
    margin:0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}
.decoration--image{
    margin:0;
    padding:0;
    min-height: 100%;
    min-width: 100%
}

.decoration--button{
    transform: translateY(-120px);
    z-index: 2;
    width:50%;
    border-radius:50px;
    height:50px;
    margin:0;
    opacity: 0;
    text-transform: uppercase;
    font-weight: var(--fw);
    letter-spacing: 2px;
    /* 
    * Instead of using transition: all
    */
    transition: opacity var(--transition),
                transform var(--transition), 
                background var(--transition),  
                color var(--transition);
    pointer-events: none;
}
.decoration--paragraph{
    font-size: 5rem;
    text-transform: uppercase;
    font-weight: var(--fw,600);
    color:Blue;
    transform: translateY(30vh);
    transition: opacity var(--transition) ;
}

.decoration::after,
.decoration::before {
    content: '';
    position: absolute;
    top:2em;
    bottom: 2.8em;
    left: 1em;
    right: 1em;
    opacity: 1;
    transition: transform var(--transition);
}

.decoration::before {
    border-top: 3px solid var(--clr-button-text-hover);
    border-bottom: 3px solid var(--clr-button-text-hover);
    transform: scale(0, 1);
 

}

.decoration::after {
    border-left: 3px solid var(--clr-button-text-hover);
    border-right: 3px solid var(--clr-button-text-hover);
    transform: scale(1, 0);

}

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

.decoration:hover::after {
    transform: scale(1, 1.05);
  
}
.decoration:hover .decoration--button{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-130px); 
     
 
}
.decoration--button:hover{
    background:var(--clr-button-text);
    color:var(--clr-button-text-hover);
}

/*
* Media Queries
*/


@media(max-width:768px){
    .decoration--paragraph{
    font-size: 3rem;
      transform: translateY(20vh);
 
}
.decoration--button{
    transform: translateY(-120px);
    height:50px;
    font-size:1.1rem;

}

.decoration:hover .decoration--button{
     transform: translateY(-110px);
}

}
@media(max-width:760px){
    .decoration--paragraph{
    font-size: 2.4rem;
    transform: translateY(13vh);
}
.decoration--button{
    transform: translateY(-80px);
    height:40px;
    font-size:.9rem;
}

.decoration:hover .decoration--button{
     transform: translateY(-100px); 
}

}
 .decoration--button{
     border:none;
 }

.decoration:hover .decoration--button{
    background: var(--clr-button-text);
    color:var(--foreground);
}

#4. Elementor Pro: Portfolio - Custom label

Category Label with Pseudo-elements
Follow the process
  1. Head over to the Portfolio widget (only available for Elementor pro user)
  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 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{
    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;
            
        }       
}

#5. Add 'menu' to Elementor Pro - Hamburger Menu

Do you prefer the default Hamburger menu or added some text next to the hamburger menu like ( Browse) or  ( MENU) for the indicator.

Most of them didn’t know what the Hamburger menu is for, so providing a name gives visitors some insights into it.

Follow the process

  1. Head over to the Nav menu widget (only available for Elementor pro user)
  2. Then click the Nav menu widget then Advanced tab
  3. Under Advanced tab – Choose CSS id/ Classes and give a class name, so you can style properly (.hamburger).
  4. You know the step after that
				
					/*
* Icons open
*/

.hamburger .elementor-menu-toggle i::after{
  content:'MENU';
  Padding-left:10px;
/*
*specify your font family
*/
  font-family: 'helvetica',sans-serif;
  /*Adjust your font size as needed*/
  font-size: 1.4rem;
}

 /*
  *Close Icon when Interact 
  */
 
.hamburger .elementor-active i:after{
  content:'CLOSE';
  font-size: 1.4rem;
}

#6. As CSS Tooltip

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

Hover me please 
				
					
.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;
    
}

#7. Sub-menu Triangle when hovering

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

				
					
.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;
    
}

#8. Animated Hover effect on Links

When you hover any link on my website or on menu after you click the Hamburger menu . You get nice hover effect or animated underline effects .


This can be done with simple CSS  and you will get tutorials from Link underline animation from LetsWP.io or if you want more fancier then go to specky boy to learn more.

#9. Added Icons to Headings

Display Font-Awesome icons before the heading widget

Do you know you can add font awesome icons before and after using FontAwesome? See the video below-

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::before{
content:'\e801';
font-family: 'eicons';
padding-right:5px;
}


/* 
* After heading
*/

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

#10. Added Icons to Post Title in WordPress

I wrote a tutorial 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.

Add title to a Post Title in WordPress

If you have other example and want to contribute,please do 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://letswp.io/link-underline-animation/
  4. https://codepen.io/mxttsco/pen/KgodYm
  5. https://speckyboy.com/underline-text-effects-css/

Powered by Elementor pro

This site is powered by Elementor pro : Theme builder and it contains Affiliate links,which means that if you buy from my links, Foxscribbler will earn a small commission.This commission comes at no additional cost to you.