Linda Ojo

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

🚧 Note: If codepen is not displayed properly below please refresh.

See the Pen ::first-letter by Linda (@LindaOjo) on CodePen.

::first-line

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

Example

See the Pen ::first-line by Linda (@LindaOjo) on CodePen.

::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

See the Pen ::before & ::after by Linda (@LindaOjo) on CodePen.

::selection

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

Example

See the Pen ::selection by Linda (@LindaOjo) on CodePen.

::placeholder

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

Example

See the Pen ::placeholder by Linda (@LindaOjo) on CodePen.

::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

See the Pen ::marker by Linda (@LindaOjo) on CodePen.