CSS Pseudo Element Selector Tutorial

CSS

In this section, we will learn what the Pseudo Element Selector is and how to use it in CSS.

Pseudo Elements in CSS

In , elements have tags. For example, <html>, <body>, <input>, <form>, <p> etc. We use these tags in our HTML documents to add new elements and contents.

But other than these official elements, there are other elements that we don’t call them element particularly! They are more like unofficial elements or pseudo elements! (Note: the word pseudo, means not real).

For example, the first character of a text content or the first line of a paragraph in a <p> element! These are not official element since they don’t have their own tags and attribute etc. and yet, they are elements of a document! So that’s why we call it Pseudo-Elements.

Now, in HTML, there are selectors we can use to access such type of elements which we call these selectors as Pseudo Element Selectors.

CSS Pseudo Element Selector Syntax:

This is the general syntax of pseudo element selectors:

selector::pseudo-element {
   property: value;
 }

Pseudo-element selectors target unofficial elements in a page. For example, the first line of a paragraph, or the first letter of a paragraph etc. Now, sometimes there are many paragraphs in a page and we might want to only change the style of the first line of a specific paragraph only! For this reason, pseudo-elements for the most cases are mixed with typical selectors!

So here the selector is typical CSS selector we’ve seen so far (for example it could be the name of a class or the value of an id attribute, etc.) and we use them to focus on a specific element/s on a page.

`::pseudo-element`: after declaring the target element/s using the selector, comes the declaration of the pseudo element! Here, we declare what pseudo element (first letter, first line etc.) we want to style in the target element/s that are targeted using the `selector`.

(Note that pseudo elements start with either the double colon :: or single colon : mark).

For example:

p::first-line{

//body…

}

This selector is saying find the entire <p> elements of the page and apply the style of the declaration block on the first line of the paragraphs.

Note: the selector part is optional and we can directly use the pseudo-element selectors.

For example, if we directly set the selector to ::first-line, that means, target the entire first-lines in a page no-matter what element is holding each paragraph! (For example <h1> and <p> elements will be the target of this selector).

List of Pseudo Elements in CSS:

In short, these are the pseudo element selectors supported in CSS:

  • ::after : This selector is used to add content
    after the content of an element.

  • ::before : This selector is used to add content
    before the content of an element.

  • ::first-letter: Using this selector we can
    target the first letter of paragraphs of the elements like <p> and
    style that first letter.

  • ::first-line: Using this selector we can target
    the first line of paragraphs created using elements like <p> and
    style them.

  • ::selection: Using this selector we can target
    paragraphs in a page that are selected (Like when we click and drag over
    a text content in order to select all or portion of that text
    content).

CSS Pseudo Element: after

The pseudo element selector ::after is used to add a new text content to an element in a page! Note that this new content will be added as the last child of the target element!

Note: we use a CSS property called content to add the new text content to the target element. Also be aware that any text content we put as the value of this property will be literally interpreted the way it is. For example, if we set an HTML element as the value of this property, that HTML element will be interpreted the way it is.

Example: using pseudo element ::after in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p::after{
content: "<i>Hello from ::after selector </i>";
}
</style>
</head>
<body>
<h1 class="topnotch-number-one">Albert Einstein</h1>
<p>Imagination is everything. It is the preview of life's coming attractions.</p>
<p class="topic">Insanity: doing the same thing over and over again and expecting different results.</p>
</body>
</html>

CSS Pseudo Element: before

The pseudo element selector ::before is used to add a new text content to an element in a page. Note that this new content will be added as the first child of the target element.

Note: we use a CSS property called content to add the new text content to the target element. Also, be aware that any text content we put as the value of this property will be literally interpreted the way it is. For example, if we set an HTML element as the value of this property, that HTML element will be interpreted the way it is.

Example: using pseudo element ::before in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p::after{
content: """
}
p::before{
content: """
}
</style>
</head>
<body>
<p>Imagination is everything. It is the preview of life's coming attractions.</p>
<p>Insanity: doing the same thing over and over again and expecting different results.</p>
<p>Albert Einstein</p>
</body>
</html>

CSS Pseudo Element: first-letter

The pseudo element selector ::first-letter targets the first letter of a text content and apply CSS style to it.

For example:

h2::first-letter{
 //body...
}

The target of this selector is the first character of the entire h2 elements in a page. (Note that we can use the pseudo element on its own too! In that case, the target becomes the first letter of the entire paragraphs in a page no-matter what elements were used to create those paragraphs).

Example: using pseudo element ::first-letter in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
width: 400px;
}
p:first-letter{
color:blue;
font-size: 32px;
}
</style>
</head>
<body>
<p>

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

</p>
</body>
</html>

CSS Pseudo Element: first-line

The pseudo element selector :first-line is used target the first line of paragraphs in a page.

For example:

.level:first-line{

//body…

}

The target here is to find the entire elements in a page that have the class attribute with the value level, select their first lines, and apply the style of the declaration block to them.

Example: using pseudo element ::first-line in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
p{
width: 400px;
}
p:first-letter{
color:blue;
font-size: 32px;
}
p:first-line{
color: green;
font-size: 24px;
}
</style>
</head>
<body>
<p>

A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

</p>
</body>
</html>

CSS Pseudo Element: selection

The CSS pseudo element selector :selection is used to target those text content that are selected by users. For example, when a user clicks and drags across a text content, that text is in selection mode and so the style we specify using this selector will be applied to that selected text.

Note: only a limited set of CSS properties can be applied to the selected text content! These properties are:

color
background-color
text-shadow
cursor
caret-color
outline and its related properties
text-decoration and its associated properties

text-emphasis-color

Example: using pseudo element ::selection in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
::selection{
background-color: red;
}
</style>
</head>
<body>
<p>Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph. Click and drag part of this paragraph.</p>
</body>
</html>
Here's another example combining "::selection" with "class attribute"
<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
.red::selection{
background-color: red;
}
</style>
</head>
<body>
<p class= "red">Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.</p>
<h1>Any text you select in the paragraph below, will not turn in red</h1>
<p>Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.Click and drag part of this paragraph.</p>
</body>
</html>