7 examples of Pseudo-Elements With Elementor with css

  • kishorchand
  • Elementor Page Builder
  • March 18, 2019
  • Join the Conversation
  • Modified 7:31 am

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 provider is not minified yet you have to minified it for yourself for better performance.

2. You have to write your own media Queries if any.

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

Examples using before & after pseudo-Elements

Can't we do it Free version Elementor plugin ?

Yes you can use it without any problem but when it come to positioning or any complicated stuff you need Elementor pro because whatever CSS you're-adding will reflect directly to the editor and screen. Which make it super easy

Otherwise if you use Free version it will consume more and more time. Round trips between Elementor editor to Customizer take time

01

Icon position to right or after on Elementor Button widget

7 examples of Pseudo-Elements With Elementor with css 1
Preview
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 ?

No out of the box though but you can with little bit of css.

In order to do it you need basic CSS it can even Change the Font Awesome icons to Eicons and vice-versa.

Follow this guide to learn more -
    Follow the process
  1. Head over to Elementor button.
  2. Then Go to Button Advanced tab
  3. Under Advanced tab - Choose CSS id/ Classes (You prefer).
  4. Choose whicher you prefer for CSS id use Pound sign or Hash sign or if you are using CSS classes then use (.)
I Choose CSS classes as "btn-color-icon" for that CSS, it will be

.btn-color-icon .fa:before{
   color:purple;
}
.btn-color-icon - class name
.fa - That how FontAwesome use their name
.fa:before - that how Elementor add the fontAwesome icon in pseudo elements

02

Change font-family from Font-Awesome to Elementor Eicons

Then how to change FontAwesome icon to Eicons or Elementor icons vice-versa. It is easy peasy you need to specify Font-family as Eicons and change the content property.

Icon libraries
This is how it look when you add Font-Awesome icon directly from icon libraries.
.bt-color-fa  .fa-long-arrow-alt-right:before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

We swap out FontAwesome icon with Eicons by specifying font-family and content.

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

03

Design touch on background image

This CSS is inspire from Kevin Powell YouTube Channel & in this post i will going to demonstrate how to use with Elementor pro.

 

This can be useful for small touches, decoration etc.

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

Hover me

7 examples of Pseudo-Elements With Elementor with css 3
    Follow the process
  1. Head over to image widget
  2. Then Go to Image widget Advanced tab
  3. Under Advanced tab – Choose CSS id/ Classes (You prefer).
  4. Choose whichever you prefer for CSS id use Pound sign or Hash sign or if you are using CSS classes then use (.)
I highly recommend watching Kevin video to fully understand the code and it is one of many options.

.decoration{
   position:relative
}
.decoration::after,
.decoration::before {
    content: '';
    position: absolute;
    top:2em;
    bottom: 2em;
    left: 2em;
    right: 2em;
    opacity: 1;
    transition: transform 300ms ease-in;
}

.decoration::before {
    border-top: 3px solid yellow;
    border-bottom: 3px solid yellow;
    transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -webkit-transform: scale(0, 1);

}

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

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

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

04

Elementor pro : Portfolio - Custom label

7 examples of Pseudo-Elements With Elementor with css 2
    Follow the process
  1. Head over to 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 under CSS FlexBox property
.portfolio .elementor-portfolio__filters{
    display:flex;
    justify-content:flex-end;
    position: relative;
    margin-bottom:0;   
    
}
.portfolio .elementor-portfolio__filters::before{
    content:"Category";
    color:#fff;
    font-size:1.2rem;
    position:absolute;
    right:0;
    left:0;
    top:6%;
    bottom:0   
}
    
    @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{
            justify-content:flex-start;
            align-items:center;    
            margin:20px 0 0 ;
        padding: 10px 0 10px 0;
            
        }       
}

05

Add menu to Elementor Pro - Hamburger Menu

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

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

    Follow the process
  1. Head over to Nav menu widget (only available for Elementor pro user)
  2. Then click the Nav menu widget Advanced tab
  3. Under Advanced tab – Choose CSS id/ Classes (You prefer).
  4. You know the step after that
.hamburger .elementor-menu-toggle i::after{
  content:'MENU';
  Padding-left:10px;
  /*specify your font family*/
  font-family: 'helvetica',san-serif;
  /*Adjust your font size as needed*/
  font-size: 1.4rem;
}
.hamburger .elementor-active i:after{
  content:'CLOSE';
  font-size: 1.4rem;
}

05

As CSS Tooltip

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

7 examples of Pseudo-Elements With Elementor with css 3
Here are the css if you need :

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

.top .elementor-button:hover::after{
    content:'Surprise';
    position:absolute;
    display:inline-block;
    background-color:#000;
    color:#fff;
    padding:20px 60px;
    margin:-108px -100px;
    font-size: 1rem;
    
}

This is totally optional but can be use for small touch.When you hover button you got small triangle below black background this is the css you need – more info from CSS-Tricks and do you know Even Official Elementor website use it on their Sub-menu too

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

06

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.

07

Added Icons to Headings

Font Awesome icons to display before the heading

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

7 examples of Pseudo-Elements With Elementor with css 4

Elementor icons or eicons to display before or after

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

7 examples of Pseudo-Elements With Elementor with css 5

Here are the css :

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