Pseudo-Elements: CSS Web Design Tutorial Part 29 (Lesson 2 of 2)

::before ::after ::selection pseudo-elements

::before, ::after, AND ::selection Pseudo-Elements

Welcome to part 2 of 2 in this pseudo-element lesson. We have already worked with ::FIRST-LETTER AND ::FIRST-LINE in part 1. In part 2, we will be working with the ::before, ::after, and ::selection pseudo-elements. Let’s begin with ::before. NOTE: In order for this pseudo-class to work in Internet Explorer 8, you need to have a !doctype. The doctype declaration should be added to every Html document you create, regardless, for more reasons that just these pseudo-elements. See the images below, for the first exercise. We are using the same source code from the previous lesson.

index.html Example 1, ::before pseudo-element

::before pseudo-element html

my-styles.css Example 1, ::before pseudo-element

::before pseudo element css

Displayed Page Example 1

::before pseudo-elements display

We have added two h1 heading elements to the index.html document. In the my-styles.css document, we create a CSS rule for all h1 elements with the ::before pseudo-element added on, h1::before. Next, we use the content property to add the text Must See > before every h1 element. It’s important to know that you must surround the text you want to add before the h1 elements in double quotes ( ” “). When we run our code in a web browser, we can see that the text “Must See > is added before the two h1 heading elements. You can add an image before or after elements as well. Refer to the next set of images, for the second example.

index.html Example 2, ::after pseudo-element

::after pseudo-element html

my-styles.css Example 2, ::after pseudo-element

::after pseudo-element css

Displayed Page Example 2

::after pseudo-element display image

We add two h2 headings to our html document, and in our CSS we add a new rule with a selector and pseudo-element of h2::after. The ::after pseudo-element will add content after all of our h2 headings. We are adding an image with the content property, and the url where the image is located. Your image address might be different depending on the location that you have it saved. In the above example, We are using the location that we created in the WEBSITE FOLDER SETUP lesson. If you look at the Displayed Page Example 2 image, you can see that we have an image being displayed after both of our h2 headings. The final pseudo-element that we’re going to work with is ::selection. ::selection targets the portion of an element that is selected by a user. See Example 3 below.

my-styles.css Example 3, ::selection pseudo-element

::selection pseudo element css

Displayed Page Example 3

::selection pseudo-element display

The html document is unchanged for Example 3. In the my-styles.css document, we add a CSS rule with a pseudo-element selector of ::selection. This rule will make ANY selected or “highlighted” text on the web page have a white font color and a red background-color. See Displayed Page Example 3. If we added a SELECTOR in front of the pseudo-element; the styles we declared in our CSS rule would only apply to that type. For example, p::selection would only give us the white font color with a red background on p elements. Every other selected element that is not a p element would have the default style added by the browser. This is usually white font with a blue background.

Some important things to know about the ::selection pseudo-element are, it is not supported and will not work in Internet Explorer 8 and earlier versions. And, in order for it to work in Firefox, the entire CSS rule has to be duplicated with a prefix added to the selector. You will come across more situations like this where code needs to be duplicated, sometimes multiple times in order to have the code work or display the same in different browsers. This is why it is so important to run your code in at least Google Chrome, Internet Explorer, and Mozilla Firefox to ensure that everything displays the same way in all browsers. You should always test like this before you publish your website live on the internet. When you come across this type of issue you can search for the code or prefixes to make it display the same way in all browsers. Refer to the image below to see how we add a prefix to our duplicated ::selection rule in order for it to work in Firefox.

my-styles.css Duplicated ::selection rule with a prefix added

::selection pseudo-element prefix for Mozilla Firefox

As you can see in the above image, we copy and paste the entire ::selection CSS rule and add the prefix -moz- right after the :: and before selection. The following CSS properties can be used with ::selection.

  • color
  • background:
    • We used background-color: in our example. The background: property is basically a shortcut for multiple background properties because more values can be added to it besides a color. For example, background-color, background-image, background-position, etc. So, in our case, it would give us the same result no matter which property name we used.
  • cursor
  • outline

That finishes up our lessons on pseudo-elements. We may work with them more in future tutorials. Thanks for reading, We’ll see you next lesson.

index.html Source Code


<!doctype html>
<html>
<head>
<title>Pseudo-Elements</title>
<link rel="stylesheet" type="text/css" href="my-styles.css">
</head>
<body>

<h1>Content was added before this heading with the ::before pseudo-element</h1>

<h2>The image was added after this heading with the ::after pseudo-element</h2>

<p>We will target and style the first letter and first line of this paragraph with the
pseudo-elements <strong>::first-letter</strong> and <strong>::first-line</strong>.
The rest of this text is here to add more content to our paragraph. The rest of this
text is here to add more content to our paragraph. The rest of this text is here to
add more content to our paragraph. The rest of this text is here to add more content
to our paragraph.</p>

<h1>Content was added before this heading with the ::before pseudo-element</h1>

<h2>The image was added after this heading with the ::after pseudo-element</h2>

</body>
</html>

my-styles.css Source Code


p::first-letter {
color: red;
font-size: xx-large;
}

p::first-line {
text-decoration: underline;
}

h1::before {
content: "Must See >";
}

h2::after {
content: url("my-images/red-logo.png");
}

::selection {
color: white;
background-color: red;
}

::-moz-selection {
color: white;
background: red;
}

posted by Clear Coded Programming

Please Leave a comment

%d bloggers like this: