Pseudo-elements: How much Importance Do they have in the CSS world?

A pseudo-element is a keyword used in a selector that enables you to choose a certain portion of an element without having to surround it in an HTML element.

For instance, suppose we wish to style the first letter of a sentence. The first thing we would consider doing is surrounding it in a span element. We can use a pseudo-element selection specifically for that.

Other objects, like the bullet in a list item or the highlighted text on a page, can be matched with pseudo-elements.

The primary difference is that pseudo-elements typically target a subset of an element (or sometimes you can use them to create small elements inside other ones).

Pseudo-classes, on the other hand, focus on several states of an existent element (for example, hover, active, etc.).

Pseudo-elements are prefixed with two colons (::), while pseudo-classes are preceded with one colon (:).

Some pseudo-elements will also function with a single colon, as you will discover (:). This is primarily due to legacy issues. Try to properly use it with two colons (::).

The ::first-letter pseudo-element focuses on the first letter of its primary selector. For  instance:

Observe how a selector (any selector you're familiar with) is followed by the ::first-letter pseudo-element.

There should be two colons in pseudo-elements: You might have noticed that having just one colon: would do; this is only done for historical considerations. Two is preferred. 

The first line of its main selector is what the::first-line pseudo-element focuses on. Like this:

When the user selects text, the ::selection pseudo-element is used to change (primarily) the color and background of the text. By leaving off the main prefix, this can be used for both the complete document and a specific portion. Here are two instances:

Customizing the selection is not supported at the time of writing on mobile Safari. Search for ::selection on caniuse.com to see that.

caniuse is a great website to check whether a feature is supported by a particular browser. You can safely ignore it when it comes to IE (Internet Explorer) since it has been discontinued.

You should aim for > 90% browser support for the majority of your features. 

Using a pseudo-element in a selector enables you to pick out a certain area of an element without having to encapsulate it in an HTML element.

Pseudo-classes begin with one colon (:) and target a certain state of an element, whereas pseudo-elements typically target a section of an existing element and begin with two colons (::).

The first letter of its primary selector is the focus of the ::first-letter pseudo-element.

The first line of its main selector is the focus of the ::first-line pseudo-element.

When text is selected by the user, ::selection pseudo-element is used to change (mainly) its color and background color.

To see if a specific feature is supported by your browser, visit caniuse.com.