Advanced tutorial: Pseudo-elements ::before and ::after
What are pseudo-elements
Pseudo-element
Example
Description
::after
p::after
div::after
Placed after the content of specified element
::backdrop
dialog::backdrop
Applies styles to the background behind a dialog box or popover
::before
p::before
div::before
Placed before the content of specified element
::file-selector-button
::file-selector-button
Selects any button for file uploads (<input type="file">)
::first-letter
p::first-letter
Targets the first letter in each <p> element
::first-line
p::first-line
Targets the first line in each <p> element
::grammar-error
p::grammar-error
Styles text marked as grammatically incorrect by the browser
::highlight()
::highlight(custom-name)
Selects a custom text highlight applied to an element
::marker
li::marker
Styles the markers (bullets or numbers) of list items
::placeholder
input::placeholder
textarea::placeholder
Styles placeholder text in <input> or <textarea> fields
::selection
div::selection
Applies styles to text selected by the user
::spelling-error
p::spelling-error
Styles text marked as misspelled by the browser
::view-transition
::view-transition
Represents the root element for the view transitions overlay, containing all view transitions on the page
::view-transition-group
::view-transition-group
Represents a single snapshot group for a view transition
::view-transition-image-pair
::view-transition-image-pair
Acts as a container for the "old" and "new" view states during a view transition.
::view-transition-new
::view-transition-new
Represents the "new" view state after a view transition completes.
::view-transition-old
::view-transition-old
Represents the "old" view state before a view transition starts.
How to use ::before and ::after
Adding custom list decoration

Select the text you want to list, and switch it to a pointed list.




Get back to the before selector and in the Pseudoelement content write down the proper line:
url:("/upload/domain/12345/images/icon-name.svg").


Make animated underline to a navigation link
Another interesting usage is to create an animated underline for a link in your menu navigation. Normal text underline is very simplistic and aside from changing a color it doesn’t provide any more styling flexibility. But we can work around it.
Click on the navigation link and go to widget styles.


In the size editor set the width to 0% and the height for 2px.



Now that we have our base set-up, let’s adjust the hover state. Inside the selector, using the same selector we just styled, but we need to add a hover state to the link (not to the pseudo-element), so it would look like this:
“.nav-top-item:hover::before” (or “.navigation-items .nav-top-item:hover::before”).


