We’ve all been there before…this should be simple enough but you are scouring the internet trying to find a solution to make something work like you want.  In your mind…it’s simple.  Here is an example.  You want to include a small icon or image before or after a page title in the Divi WordPress theme.  You start down the road of “I’ll create a page title using Photoshop and add the image there!”.  Problem solved right?  Actually…not right.  You’ve just made something very simple into something very cumbersome and time consuming.  How about when you want to change the page title down the road?  Better yet…what are you going to do about the other twenty page titles?

So here’s the solution.  It’s nothing groundbreaking but something that needs to be put out there for all of you hacking your way through the Divi theme.  Don’t worry…I’ve been there.  The solution is to use the pseduo classes :before and :after.  It doesn’t take a genius or PHP guru to figure out that :before comes before the element and :after goes after the element.  Let’s see it in action.  Below is an image of a Divi page title without the icon.

How can we get an icon to show up to add a little “flair”?  It’s simple.  In your custom css file (hopefully a child theme), you add the following css:

The result:

Alternatively, you could also use the pseudo class :before to include the image before the title. Pretty simple really!

Now go have some fun!