Pseudo-Elements - ::before and ::after8:13 with Guil Hernandez
The ::before and ::after pseudo-elements let us insert virtual elements before and after an element’s content. These virtual elements are visible to the user and are style-able with CSS, but they do not appear in the source code.
What we need to know about pseudo-elements
As their names imply, the before and after pseudo-elements. 0:00 Let us insert virtual elements before or after an element's content. 0:03 These virtual elements are visible to the user, and 0:08 they're also stylable with CSS, but they do not appear in the source code. 0:11 So, we can actually add new content in element to our page from our CSS. 0:16 This can create some interesting design possibilities. 0:20 So here's what we need to know about the before and after pseudo elements. 0:25 With before and 0:28 after, an element essentially gets two extra layers we can work with. 0:29 So for every element on the page, we're also able to generate two extra elements. 0:33 One before it and one after it. 0:39 And we can style them just like we can style any other element. 0:41 This is called generated content. 0:45 So let's see how we're able to do this. 0:47 In our workspace preview, down here in our download links, 0:49 let's generate some text that indicates the type of files we can download. 0:54 So if we take a look at the markup for that, 0:59 in our index.html file, can see that the first link has the class JPG. 1:00 And the second link has the class zip. 1:06 And we want to generate the text before the link text. 1:10 So for this, we'll need to use the before pseudo element. 1:14 So let's go back to our style.css file. 1:18 And let's scroll down to the bottom. 1:22 And first to create our before pseudo-element for the JPG link, 1:25 let's first target the class jpg followed by two column then the word before. 1:30 So the only way we're able to generate content with the before and 1:38 after pseudo-elements is with the content property. 1:42 Now the content property is always used in conjunction with these 1:46 two pseudo-elements. 1:50 It's what actually allows the pseudo-elements to create the new box or 1:51 layer of content that's inserted into the page. 1:55 So once we define the content property, 1:59 as the content value will need to include a set of quotes, and 2:02 inside the set of quotes is where we write the content we want to generate. 2:07 So in this case, we wanna generate the text JPG. 2:12 And let's follow that with a space, a dash and 2:16 another space just to create some separation between the text. 2:19 All right? 2:22 So let's also give it a different font size. 2:23 So, right below that, let's add a font size property and make the value 0.75m. 2:26 So once we save our style sheet and refresh our page, we can see that 2:33 the text we wrote in that content value appears right before the first link. 2:39 Pretty neat. 2:45 And we can also insert images using the content property. 2:45 So instead of displaying the file type with text, 2:49 let's insert icons in front of the links. 2:52 So let's go back to our before pseudo-element, and 2:55 this time as the content value, 2:59 we're going to specify a URL with a path to the image we wanna use. 3:01 Our images are in the image directory here. 3:07 So, for the JPG image, let's first define the URL function. 3:10 And inside the parentheses, where we're going to define the path to that image. 3:15 So it's in the image directory and 3:19 the JPG image is called icn dash picture.svg. 3:23 And we're gonna replace the font size property with a margin property just to 3:29 give it some separation on the right side. 3:32 So lets say, margin right. 3:34 And, set the value to eight pixels. 3:38 So now we'll just go ahead and copy, this before rule, paste one right below. 3:40 So instead of .JPG, we'll target the zip class, and 3:47 change the name of the file to icon zip.svg. 3:50 Notice how this time I didn't use any quotes for the content values. 3:56 Since we're generating an image with the URL function, 4:00 if we did wrap them in quotes they become literal strings. 4:04 So for example, I'm going to write a set of quotes around our URL value. 4:07 And if we save and refresh the page, as you can see, that inserts the actual text 4:14 written in the quotes as the content instead of that image we need. 4:20 So it literally generates what we typed. 4:24 So let's go back and undo the quotes in both content values. 4:27 And once we save our style sheet, and 4:33 look at it again, we're able to see those generated icons next to each link. 4:35 They appear right before the text. 4:41 And, if we view our source code, we can see how the elements do 4:43 not appear anywhere in the HTML source because they're being generated by CSS. 4:47 So it doesn't actually change anything in the document, but 4:52 if we inspect our code in Chrome developer tools. 4:56 So up here in the top right menu, we're going to select, 4:59 More Tools and Developer Tools. 5:02 The neat thing is that we're able to select, and 5:05 inspect, a pseudo element style. 5:07 So here, we're able to see the before pseudo element being inserted into 5:10 our page. 5:14 And we see its associated styles over here in the Styles panel. 5:15 The after pseudo element works just like the before pseudo element except that it 5:20 inserts content after an element. 5:25 So back in our style sheet, if we replace the before pseudo elements with after, 5:28 so let's do it for the JPG rule first. 5:33 Then the zip rule. 5:38 Once we save our style sheet and refresh the page, 5:41 we can see how the icons are now generated after the text. 5:44 But I like them in front of the text. 5:49 So let's go ahead and set both selectors back to that before pseudo-element. 5:51 So, I'm just gonna go ahead and undo them. 5:55 But later, we're gonna generate some more elements with 5:57 that after pseudo-element after link text. 6:00 Now, the neat thing about pseudo-elements is that we can even 6:04 leave the content property empty and still be able to 6:06 insert certain shapes as generated content into the page, so let's see that. 6:10 Let's create a new pseudo-element selector that targets the h1 6:16 element with the before pseudo-element. 6:21 And let's add the content property as we always need to do with pseudo-elements. 6:25 And this time we're gonna make the value an empty set of quotes. 6:29 We're gonna follow that with a display property. 6:34 And let's set the value to inline-block so 6:37 that we're able to position these pseudo-elements shape. 6:40 And let's give it a width, so 6:43 let's say 24 pixels and let's also make the height 24 pixels. 6:45 And we wanna make it rounded, so let's add a border radius property. 6:52 And, set the value to 50%. 6:58 We'll wanna see it, so let's give it a background color. 6:59 Let's set the value to coral. 7:04 And finally, let's apply some margins. 7:07 So let's add a margin property. 7:09 We'll set the top and 7:11 bottom margins to 0, and the left and right margins to 10 pixels. 7:12 All right. So let's take a look at 7:17 our pseudo-element shape. 7:18 Once we save our style sheet and refresh the page, we can see how that 7:20 creates a nice circular-shaped element before the heading one's text. 7:24 Now we can add one more, 7:31 if we'd like, right after it with the after pseudo-element. 7:32 So, let's go ahead and group this before pseudo element selector, 7:36 with the after selector, so we'll type h1 column after. 7:40 And once we refresh the page, 7:45 we can see that same pseudo element generated after the h1's text. 7:47 So this is what I meant earlier when I mentioned that the before and 7:52 after pseudo elements give us two extra content layers to work with. 7:55 So as we can see, these are really powerful selectors because we've 8:00 generated two extra elements from a single HTML element. 8:04 And we're able to style them with CSS like regular elements. 8:09
You need to sign up for Treehouse in order to download course files.Sign up