Table of Contents
- 1 Change the color of Elementor Button icon widget
- 2 Change font-family from Font-Awesome to Elementor Eicons
- 3 Design touch on background image
- 4 Elementor pro : Portfolio - Custom label
- 5 Add 'menu' to Elementor Pro - Hamburger Menu
- 6 As CSS Tooltip
- 7 Sub-menu Triangle when hovering
- 8 Animated Hover effect on Links
- 9 Added Icons to Headings
: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 best browser compatibility, you need to head over to Autoprefixer CSS online to work on all devices.
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 to CSS positioning 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.
Otherwise if you use Free version it will consume more and more time. Round trips between Elementor editor to Customizer take time
Otherwise if you use Free version it will consume more and more time. Round trips between Elementor editor to Customizer take time
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 -
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
- Head over to Elementor button.
- Then Go to Button Advanced tab
- 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.
- 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 - class name
.fa - That how FontAwesome use their name
.fa:before - that how Elementor add the fontAwesome icon with before and after pseudo-elements
.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;
}
Change font-family from Font-Awesome to Elementor Eicons
Then how to change Font-Awesome icons to Eicons or Elementor icons vice-versa. It is easy peasy you will need to specify Font-family as Eicons and change the content property.
This is how to insert Font-awesome icons or any icons libraries to Elementor’s button widget
This is how it looks when you add Font-Awesome icon directly from icon libraries.
/*
* .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;
}
We swap out the Font-Awesome icon with Eicons by specifying “font-family” as Eicons and “content property”.
/*
* .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;
}
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 video to fully understand the code and it is one of many options.
In order to see the hover effects, you have to hover upon image.
Hover me
The demo above is built with an Elementor HTML widget and you can copy and paste the HTML and CSS to your project.
<!-- you need to generate image srcset for responsive devices-->
<div class="decoration">
<p class="decoration--paragraph">Hover me</p>
<img
class="decoration--image"
width="800"
height="522"
src="https://foxscribbler.com/wp-content/uploads/2019/03/pexels-photo-297755-1024x668.jpg"
srcset=""
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
*/
: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,600);
letter-spacing: 2px;
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);
-ms-transform: scale(0, 1);
-webkit-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);
-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)
}
.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);
}
.decoration::after,
.decoration::before {
content: '';
position: absolute;
top:2.9em;
bottom: 3.5em;
left: 1em;
right: 1em;
opacity: 1;
transition: transform var(--transition);
}
}
@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::after,
.decoration::before {
content: '';
position: absolute;
top:2.9em;
bottom: 3.5em;
left: 1em;
right: 1em;
opacity: 1;
transition: transform var(--transition);
}
}
.decoration--button{
border:none;
}
.decoration:hover .decoration--button{
background: var(--clr-button-text);
color:var(--foreground);
}
Elementor pro : Portfolio - Custom label
Follow the process
- Head over to the Portfolio widget (only available for Elementor pro user)
- Then click the Portfolio widget Advanced tab
- Under Advanced tab – Choose CSS id/ Classes (You prefer).
- You know the step after that
.portfolio .elementor-portfolio__filters{
display:flex;
justify-content:flex-end;
position: relative;
margin-bottom:0;
z-index:1;
}
.portfolio .elementor-portfolio__filters::before{
content:"Category";
color:#fff;
font-size:1.2rem;
position:absolute;
right:0;
left:0;
top:6%;
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{
justify-content:flex-start;
align-items:center;
margin:20px 0 0 ;
padding: 10px 0 10px 0;
}
}
Do you prefer the 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 into what is it for.
Follow the process
- Head over to the Nav menu widget (only available for Elementor pro user)
- Then click the Nav menu widget then Advanced tab
- Under Advanced tab – Choose CSS id/ Classes and give a class name, so you can style properly (.hamburger).
- 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;
}
/*
*Icons close
*/
.hamburger .elementor-active i:after{
content:'CLOSE';
font-size: 1.4rem;
}
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:var(--clr-button);
color:#000;
padding:20px 60px;
/*
* Adjust as per your requirements
*/
margin:-108px -100px;
font-size: 1rem;
}
When your mouse pointer hovers over Elementor’s navigation menu, 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;
}
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.
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;
}
If you have other example and want to contribute,please do consider using comments.
Thank you
Reference :
