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
Top comments (0)