This will be the brief introduction about AFTER and BEFORE pseudo elements. These 2 can be particularly useful in DIVI because they can be used to enhance existing divi content and modules. When we talk about pseudo selectors there are more of them than this two, but in this post I will focus on this two. Also I will show you where and how I used before and after pseudo elements in development of DIVI CLINIC premium child theme.

WHAT ARE PSEUDO ELEMENTS?

After and before pseudo elements are features of CSS that are allowing us to create extra markup right before or after the certain elements without interrupting existing structure. Lets take a look at the short example of after and before pseudo elements. Lets say you have text module in your divi builder with paragraph “This is an example paragraph” and a class set to text module .example. Then you append this CSS to your text module like this:

.example:before{content:"#";}

.example:after{content:"#";}

Just as an example here you will now have hashtag (#) before the actual content and after the actual content like on this image bellow:

after and before

For after and before pseudo elements to actually exist and display in FrontEnd they need to have content: ” “; part in CSS. Content part can contain characters(whitespaces also) or url’s so you can also append some images or icons before or after your content like this:

.example:before{content:url("http://url-to-your-image-goes-here");} 

What extends possibilities of pseudo elements is that you can style them like every other elements on your website with CSS, which I will demonstrate you with few examples from Divi Clinic.

WHERE ARE PSEUDO ELEMENTS LOCATED

Pseudo elements aren’t involved in the structure as other elements, so they will not make any unwanted changes in DOM tree when using them. They are in child relation with the targeted elements and they will be placed after or before that element depending which one of pseudo elements are you using (before or after). You can locate them mostly using your build in developer tools in your browser by targeting the element that contains pseudo elements and see the CSS that is used for generating them:
example before pseudo

USAGE EXAMPLES OF PSEUDO ELEMENTS IN DIVI CLINIC

Sliding effect on hover on services blocks -> LINK HERE

slicing hover

I will guide you trough with step by step how you can achieve this same or similar effect. if you want to have sliding background lets say on your column like it is on Divi Clinic icons, you need to create a row and add at least one column to it. You can also apply this to any background (for sections, whole rows, modules etc.). So when you created a column I will use here as an example a text module with some Lorem ipsum text.  When you have created something similar add a class to your column. I added a class named .sliding_background.

SLIDING BACKGROUND

And In that column I added text module with Lorem Ipsum, blue background, bit of padding in css, and more important I will set position to relative which I will explain you further why:

.sliding_background{background-color: #199ad9;padding: 40px;position:relative;}

Feel free to add additional CSS if you like to, i will keep it simple just for the purposes of this demonstration. So now I have something like this.

background slide step 1

So now we want to have slide from left to right on hover to appear in light blue (or different) color. What we are going to do is create container inside that existing column with pseudo elements. Also we are going to trigger that changes on hover. So CSS for that will look like this:

.sliding_background:before{
content:"";
position: absolute;
width: 0;
height: 100%;
background-color:#5eb8e4;
transition: all 400ms;top:0;left:0;
}
.sliding_background:hover:before{

content:"";
position: absolute;
width: 100%;
height: 100%;
background: rgba( 255, 255, 255, 0.3 );
transition: all 400ms;
}

So now you will have slight layer of white on top of your element created with pseudo element that triggers its appearance on hover. So that is why we set its width to 0 at the beginning, and on hover on 100% easing it with transition of 400ms.  We also set position of pseudo element to absolute because absolute element will nicely fit inside the relative parent which is a great deal. So if you have element of certain width and height like we do on this column, a child element (which pseudo elements are in relation to targeted elements) with absolute positioning will be absolutely positioned in relative parent element. That is why we set width and height to 100% to cover whole area of relatively positioned column. Also we used left and top value with zero so that our pseudo element fits right on the borders of parent element. More about this topic with general explanation you can find here on this link. So now you have a nice hover effect like this:

hover effect

Now you can do additional changes to this hover effect you can slow it down a bit if you add more milliseconds to transition property. Also you can make this element hover from top to bottom. Only thing you need to change from previous CSS is to set initial value of width to 100% and height to 0%. Then in hover state set height to 100% (as already is), so now you will have hover effect from vertically. Also you can copy whole code from beginning  here:

.sliding_background{background-color: #199ad9;padding: 40px;position:relative;}
.sliding_background:before{
content:"";
position: absolute;
width: 0;
height: 100%;
background-color:#5eb8e4;
transition: all 400ms;top:0;left:0;
}
.sliding_background:hover:before{

content:"";
position: absolute;
width: 100%;
height: 100%;
background: rgba( 255, 255, 255, 0.3 );
transition: all 400ms;
}

hover effect 2

Also you can make that hover element to appear from upper right angle to left bottom if you set initial values of height and width to zero and you will have this result:

hover effect 3

 

You can keep playing with different values here to achive desired effect. Originally on Divi Clinic theme width is set to 50% so it is half on overlay already.

Icon next to toggle title on departments section – LINK HERE

To achieve this, we will also use before pseudo elements on h5 tag with class of .et_pb_toggle_title. So first in your divi builder create one toggle module and give it some name you want. Before we proceed on icons make sure you have Font Awesome icon set loaded.  Also make sure you set a class to your section for better targeting your toggles with CSS. I have set the class of .dc_toggles on the section where my toggles are. Now we will add icon using pseudo element:

.dc_toggles h5.et_pb_toggle_title{position:relative;padding-left: 5%;}
.dc_toggles h5.et_pb_toggle_title:after {
font-family: FontAwesome;
content: "\f21e";
position: absolute;
left: 2%;
color: #199ad9;
}

So we now have again set parent element position to relative and set pseudo child to absolute positioning. We have set left value to 2% so icon is separated from far left to look nicer. Also now we must move text a bit so it doesn’t overlay the icon with some padding. I have added 5% on padding on left with few media queries correction when necessary for smaller screens (tablets and mobiles).

Other parts where I have used pseudo elements in Divi Clinic will be covered in next posts.

This 2 examples are here just to demonstrate the part of pseudo elements power, as they are much more powerful and the capabilities of using them is limited by your imagination. In future posts I will write more about pseudo elements and how I use them in development of child themes. Thank you for reading and don’t forget to subscribe to our newsletter!

GRAB A DEAL – DIVI CLINIC IS ON SALE – 50% OFF HERE

Share This