I have been out of touch of HTML/CSS since quite a while now. There was a time when I used to work actively with HTML/CSS and develop templates for ThemeForest. But for around last 4 years or so, I completely stopped developing any new templates.
Recently when I was browsing some typography styles, I saw that there were certain elements added on start and end of headings. On first look it looked to me like they were some Div stylings but on exploring them down further, I found that they were being styled with what they call, CSS Pseudo Elements.
Basically, CSS Pseudo Elements are elements you can place before and after your HTML tags in the form of content. The content in Pseudo Elements in the thing that helps you put content like images, icons, special symbols or even text in the HTML element. Placing text through CSS was something which I found interesting. Seeing this, I planned on doing some hands-on on this particular CSS styling feature. As a result, I created some heading styles using the Pseudo Elements to make them standout and look much better than the normal heading styles.
You can check below for some of the heading styles created and the accompanying styling for it. You can download all sample files for the below styling from here.
1. Heading styled with a “before” pseudo element.
2. Heading styled with both “before” and “after” pseudo elements.
3. Heading styled with an “after” pseudo element.
4. Using Quotes as pseudo elements.
5. Using an image as pseudo element.
You can download all sample files for the above styling from here.
