Whether you’re designing a website or a web application, you’ll need custom styles for the HTML headings like h1 or h2. In this article, you’ll learn how to create some cool headings effects using CSS pseudo-elements.
So, why pseudo-elements? The answer is very simple: there is no need to add extra markup. This fits perfectly for the HTML headings we’re going to create here.
As you can see above, there is no rocket science here. Just a simple HTML heading with a CSS class that will properly style it. All the other headings use a similar HTML structure, so it can’t easier than that.
Noticed the background-clip: padding-box CSS declaration? This will help you achieve a cool effect: transparent borders for the main wrapper. Basically, the CSS [background-clip](https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip) property specifies whether an element’s background, either the color or image, extends underneath its border.
_Browser support for background-clip: Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ _
Below is a simple and good looking effect made using the CSS border property: