How-to articles, tricks, and solutions about PSEUDO-ELEMENTS

In this tutorial, we’re going to show some ways of adding a line break before an element. For that, use the white-space property and ::before pseudo-element.

If you are tired of standard heading styles then read this snippet and learn to add lines before and after heading giving it an attractive and unique style.

There are a few ways to break a line without using a <br> tag. For that, we can use the white-space and display properties, as well as pseudo-elements.

In this snippet, you will find out how it is possible to center a text within the CSS :before pseudo-element. Try an example and find its description to make it clear.

In this tutorial, you can see how to change the color of the first word of a text. For that, use the CSS :before pseudo-element with the content property.

How to Create Loading Spinner With CSS? CSS animations allow creating a loading spinner easily. Learn with W3docs online tutorial. Fast solution.

If you want your Website to look creative, then read our snippet and learn how to get a cut corner effect using different methods and try some examples.

You may come across the difficulty of making the border of an element shorter than its parent element. To overcome this, use CSS properties and HTML elements.

Read this tutorial and learn the simplest and fastest way of selecting and manipulating the CSS pseudo elements using some jQuery and CSS methods.