Tutorial by Examples

Pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of a document. The content attribute is required for pseudo-elements to render; however, the attribute can have an empty value (e.g. content: ""). div::after { conte...

Pseudo-elements are often used to change the look of lists (mostly for unordered lists, ul). The first step is to remove the default list bullets: ul { list-style-type: none; } Then you add the custom styling. In this example, we will create gradient boxes for bullets. li:before { conte...