Advanced Styling using CSS Pseudo Elements

#css #webdev #beginners #programming

This article was originally published on lindaojo.com

Last week, I wrote about CSS Attribute Selectors. This week, we are moving on to CSS Pseudo Elements.

CSS pseudo-elements are used to style specified parts of an element. When used properly, they can create pretty amazing styles. Let's check them out below.

::first-letter

The ::first-letter pseudo-element is used to style the first letter of a text.

Example

::first-line

The ::first-letter pseudo-element is used to style the first letter of a text.

Example

::before and ::after

The ::before pseudo-element can be used to insert some content before the content of an element.

The ::after pseudo-element can be used to insert some content after the content of an element.

Example

::selection

The ::selection pseudo-element matches the portion of an element that is selected or by a user.

Example

::placeholder

The ::placeholder CSS pseudo-element represents the placeholder text in an "input" or "textarea" element.

Example

::marker

The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on elements with display set to "list-item", such as the "li" and "summary" elements.