DEV Community

Cover image for Advanced Styling using CSS Pseudo Elements
Linda
Linda

Posted on

29 6

Advanced Styling using CSS Pseudo Elements

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay