Before and After Classes in CSS

What are :before and :after?

• They are a way to insert content using only CSS
• :before and :after are pseudo classes – a pseudo class targets a specific part or state of your selector and are written with a colon e.g. .myclass:hover is a pseudo class that targets a state. 
• Adding a before / after is very similar to adding a <span> element inside of the element you are putting it on, but without using any html. 

Why use a before / after?

• Add something to all the elements at once without having to add it manually. In fact, Flatsome is using a before to add the carets to these list items. Some other examples would be automatically adding quotes around blockquote elements, or adding an overlay to an image. 
• They can be helpful when you don’t have access to the html but need to add in another element. Do note that these elements should never contain important SEO content as it most likely will not be indexed.

Things to know when using before / after elements:

• Before and after elements are children of the element you add them to. :before will be the first child, :after will be the last child. 
• When first declaring a before / after on an element, always use the content property even if it’s empty (content:”;)
• Before / after are display: inline by default, similar to a span. If you want to change sizing, you will most likely need to change the display to inline-block or block. 
• One colon or two colons are both accepted (.myclass::before or .myclass:before)
• You can call an image with before / after by writing content: url(‘/your-image/location-url’).
• If sizing of an image becomes an issue (which is common), you can set the content to empty and set the image as a background image instead – you’ll have to set a specified height and width for this method.    
• You can combine pseudo classes. Need your before to have a hover effect? You can write .myclass:hover:before