a::before{
content: url(“imageurl.com”)
}
a::after{
content: url(“imageurl.com”)
}
				
			

Video Summary

Alright, in this section we’re gonna be talking about pseudo elements. And pseudo elements are mainly used to add an image or an icon before or after an HTML element. And the reason why this was why WordPress developers and developers use this is that they can take certain images and icons and add them before and after an element without actually having to use their own HTML code. They can easily just do this with CSS. I personally, I don’t use this method very often, if ever, I would rather set my own images as an icon or within itself. But once in a while you will run into where a WordPress developer has set this up and you might want to change that image or maybe take it away completely. So how this works is that we have the HTML selector here, you use two colons and then you can use before or after, and most of the time more times than not they’ll use this content, property and use it as a URL and use the image URL right in here to be able to set an image before and after. I think just hopping over to code pen you’ll start to see how this works. So once we’re here, it’s the same thing as a pseudo classes is we have this paragraph right here. And we have a CSS styling for this paragraph where at the font size is 32. Same thing when we use the hover tags with pseudo classes is we’re going to have to make an additional selector but basically using two colons and let’s do before and let’s open up our curly brackets. And now what we can do is we can do content. We can do URL and put in our parentheses, put in our quotes and make sure we have that semi colon I’m just going to use this image from before when I was using this little spade icon that I use for the icon or the icon image for the list. So I’m gonna copy this URL over and we’re gonna hop back into code pen and we’re gonna go right but the parentheses we’re going to paste it and now we have this little icon at the beginning of this paragraph. Now if you want to use after what we can do, as will display use after and it pushes it to the end. 

Again like this, you might encounter this when you’re working with themes or you’re working with plugins that some developer has used. I personally don’t like using this because especially if you’re thinking about the before, I could set this up as a list and manipulate the way I want to instead of using the pseudo elements but I still wanted to cover this because more times than not, you might encounter someone who used this pseudo-element and put a graphic or an icon here and you’re going to want to change that eventually or take it away and this is how we interact with the pseudo-elements. So this is pretty straightforward between the pseudo-class and pseudo-elements, it’s just ways that we can adjust the CSS for the same selectors but add just more functionality to it. So let’s hop over to the next section.