Advanced Styling using CSS Pseudo Elements
Published: 2021-01-11
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.