CSS ::before and ::after Selectors

Instructor: [00:02] CSS offers a variety of different types of selectors. All of these selectors allow you to select certain elements within the DOM, or certain parts of each element. The before and after selectors are powerful tools, specifically when you're wanting to place content in relation to an element within the DOM.

[00:18] Today, before we go over before and after, I just want to walk through our HTML layout really quick. You'll notice that have a style block within the head block of the HTML file. The only reason I'm doing it like that is so that it's easier to follow along.

[00:33] If you have a remote style sheet that you reference via URL, then it'll work just the same as it does in our tutorial video. The modern proper syntax for the before and after pseudo-elements is going to be double colons, like you'll see in the style block below.

[00:48] However, if you do need to support IE8 for any reason, then single colon is what you're going to want to choose to use. Single colon will be supported by new modern browsers as well. In this first example, we're going to be applying a badge to the span tag in our HTML.

[01:04] If we go over to the browser, we can see that red badge in the upper right of hello world. If we inspect that element, we'll see that that pseudo after element is not actually in the DOM. However, it is placed after the content of the span tag.

[01:17] If I try to highlight the content of the span tag, that again will show you that I cannot highlight that red badge, because it's not technically in the DOM. Now, let's walk through some of these properties that we're using in our after selector inside of our CSS.

[01:31] The first one to talk about is the content property. This property can be filled with a string, a URL for an image, or we can leave it blank. In this example, we have the exclamation mark in there, which is what we see inside of the red badge in our HTML.

[01:45] Next, we position that pseudo-element after absolutely. We do a top negative 15 and a right negative 15. That's going to give us that up and to the right look, that when we go to our browser and look at that red badge that we see.

[01:59] You'll notice that we position the span relative. The reason that we do that is, if we comment it out, and just position the after absolute, it's going to be absolute of the entire HTML, so it's off and to the right of the whole page.

[02:12] By positioning the span relative, we say that we want this after pseudo-element to be absolute in relation to the relatively positioned span to it is inside. The last example that I want to go over for the before and after pseudo selectors is going to be about actually positioning something before or after the content within the DOM element.

[02:33] For this example, we'll go ahead and add the before and after selectors to a paragraph tag. For the content, we'll just put an X for both of them. Notice here that I'm actually using the single colon instead of the double.

[02:45] The reason that I'm doing that is just so that we can see that that also does work in modern browsers. Let's go ahead and add some color, so we can tell them apart. We'll make the before blue, and we'll make the after green.

[02:57] Now that we've added these selectors to the paragraph tag, let's add that to our HTML now. We'll just create a paragraph tag with some text inside. Now, when we go back to the browser and refresh, we'll see our before and after Xes take effect.

[03:10] Now, notice when I try to select the text, I can only select the text that I wrote inside the paragraph tag, and not the blue or green Xes. The reason for that is because, again, technically speaking, they are not actually in the DOM.

[03:24] If we inspect the element, we can see that the before comes before the content of the paragraph tag, and the after comes after, just as the names would suggest.