7 examples of Pseudo-Elements With Elementor with css

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

: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.

7 best examples using before & after pseudo-Elements with Elementor pro

Can’t we do it Free Elementor plugin ?

 

Yes you can use 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.

Otherwise if you use Free version it will consume more and more time.

01

Icon position to right / after on Elementor Button

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 you don’t with css yes you can.

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 –

  1. Head over to  button.
  2. Head over to Advanced tab
  3. Under Advanced tab – Choose CSS id/ Classes (You prefer). If you using CSS id use Pound sign or Hash sign and if you are using CSS classes then use (.) like #id or .classes

/*css for changing color for after button*/

.btn .fa:before{
color:Yellow;
}

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

7 examples of Pseudo-Elements With Elementor with css 2
Tutorials are listed down below

Here the css you need : This will replace font awesome icon 

.bt-color-eicon .fa:before{
content: '\e837';

font-family: "Eicons";
font-weight: normal;
font-style: normal;
}

02

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.

Example : you have to hover image below in order to see the effect.

7 examples of Pseudo-Elements With Elementor with css 3

Same implementation see first answer – in short – Section/Advanced/css classes  : img

I highly recommend watching Kevin video to fully understand the code and it is one of many options.

.img::before,
.img::after {
content: '';
position: absolute;
top: 1em;
bottom: 1em;
left: 1em;
right: 1em;
opacity: 1;
transition: transform ease-out .31s
}


.img::before {
border-top: 1px solid white;
border-bottom: 1px solid white;
transform: scale(0, 1);
-ms-transform: scale(0, 1);
-webkit-transform: scale(0, 1)
}


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

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


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

03

Elementor pro : Portfolio - Custom label

Give an CSS classes under portfolio widget> Advanced > Advanced – CSS classes as “portfolio” without quotation .

.portfolio .elementor-portfolio__filters{
display:flex;
justify-content:flex-end;
margin-bottom:2%;

}

.portfolio .elementor-portfolio__filters::before{
content: "Select the items from category";
color: black;
font-size: 1.2rem;
position:absolute;
right:65%;
left:0;
top:10px;
bottom:0;
}

If you going to add background color like snifflevalve portfolio blog then i highly recommend watching Sniffle Valve videos
Play Video

04

Add any word to the Elementor Pro - Hamburger Menu

Do you prefer default Hamburger menu or added some text next to the hamburger menu like ( Browse) or  ( MENU) for U.X. Most of them didn’t know what the Hamburger menu is for so it is better to add text so your visitor will understand. So how to do it ,it is pretty simple and you need to learn how to use Inspect elements and some basic CSS to accomplished your need.

7 examples of Pseudo-Elements With Elementor with css 6

.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

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 7

Here are the css if you need :

 

/*Magic Text will show when you hover button*/

 

.top .elementor-button:hover::after{
content:'Magic';
position:absolute;
display:inline-block;
background-color:#000;
padding:20px 60px 20px 60px;
margin:-108px -80px;
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 Elementor use it on Sub-menu too*/

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

06

Animated Hover effect on Links

When you hover any link on our 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 elements on Headings

Font Awesome icons to display before the heading

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

7 examples of Pseudo-Elements With Elementor with css 8

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 9

Here are the css :

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

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

Thank you

Powered by Elementor pro

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

RELATED

Tutorials

This website or its third-party tools use cookies, which are necessary for its functioning and required to achieve the purposes illustrated in the cookie policy.
You accept the use of cookies by clicking OK button.

Use Brave Browser to protect yourself from Cookies or any tracking..