DEV Community

loading...
Cover image for Advanced Styling using CSS Pseudo Elements

Advanced Styling using CSS Pseudo Elements

lindaojo profile image Linda ・2 min read

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.

Example

Read more articles

Discussion (0)

pic
Editor guide