: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
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 –
- Head over to button.
- Head over to Advanced tab
- 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.
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.
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;
}
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.
.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:
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.
See the Pen Link Underline Animation from LetsWP.io by Firsh (@Firsh) on CodePen.
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
Elementor icons or eicons to display before or after
Have fun with Elementor icons (eicons) too if you know the CSS.
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
