Target HTML Elements not Explicitly set in the DOM with CSS Pseudo Elements

Instructor: [00:01] Pseudo-element selectors are used for styling elements that are inexplicitly set in the DOM. Like pseudo-classes, we use a colon to declare a pseudo-element, but we use two colons to differentiate pseudo-element selectors from pseudo-class selectors.

[00:12] Probably, the most useful are the before and after pseudo-elements. I've got a blockquote here in the HTML. If I wanted to put some quotes, double quotes, before and after, I could use the before pseudo-class or pseudo-element.

[00:26] To go ahead and change the content to be set to double quotes which will make it double quote character appear before the rest of the content. I can duplicate this and change it to an after, and that will give me double quotes afterwards.

[00:41] We can also have some better formatting on our quotes with the help of a property called quotes. If we use the blockquote selector and set the quotes property to be a series of quotes here, I'm going to go ahead and just paste it in.

[00:56] These are just strings that represent, the curled double quotes. Here, in the content, and the before I can change it to be open quote and change it to be closed quote, and that will actually replace those quotes with these curled ones.

[01:09] The second pair of quotes actually applies to cases where you have nested quotes. Let's look at another useful example. Here, I've got a nav with a unordered list of links, similar to what you might see in a footer of a website. I'm going to go ahead and change some of the formatting of the list itself.

[01:33] Go ahead and start by getting rid of the bullets by changing the list style to none. Getting rid of that indent by changing the padding to zero. Then, we can change the font family. I'm going to use Verdana. That thing is huge, so let's change the font size to something a little bit smaller.

[01:54] I'm going to align this to the center which doesn't make too much sense right now. Once we go ahead and change the list item display, we're going to set that to inline block, those will allow those things to all be on one line.

[02:07] I'm going to style the link a little bit and start by a changing the color to something a little bit more subdued than that blue. I'm going to change the decoration on the text to be none, so it gets rid of that underlying.

[02:30] Right now, it's hard to actually tell where one link starts and the other one ends. Let's have a hover state to that, which will also make it seem a little bit more like a link. That will help with the look by putting that underline back on the text decoration there.

[02:44] If I hover over them, at least I can tell which is which. To make it a little bit better, let's go ahead and put a separator in there. This is where we'll use the pseudo-element. We'll put an after. Got to use the double colon. We'll put it after on the list items and we'll change the content to be just this vertical pipe.

[03:06] I've got to change that to a class. Now, you can see we've got a nice separator line, but let's change the margin a little bit to spread that a little more evenly. If you notice, how that last one's got a line on it as well which it doesn't need.

[03:27] We'll use the nth child or the nth last child. Just started after that first element, so we'll do n+2. That will get rid of that last one. Let's go ahead and uncomment out the next example. It's just an article with the paragraph of text inside.

[03:48] We're going to use it to show off another pseudo-element called first line. If we use the p tag and do first line, you can actually change the color, just the first line of text, without defining it in its own element.

[04:04] We can change that to something...instead of FireBrick we can change it to green. There is another pseudo-element that we can use called first letter. That would allow us to do something like a drop cap.

[04:19] I'm going to go ahead and change the font size to be something bigger. I'm going to set the flow to left to get the text to go around it. Let's put the line height and some padding. It probably also could use some font weight increase there. Make it something a little bolder.

[04:51] The last pseudo-element example that we'll look at actually deals with form elements. If we uncomment this, you've got an input that's of type email and it has a place holder, which is just a little bit of text that shows up, and there is no text in there put in by the user.

[05:08] We can style this place holder using place holder pseudo element. We'll change the font size to be a little smaller, and we can change the color. This will just make it the little bit lighter.

[05:26] At some point, you might be tempted to use some of these elements incorrectly, especially like before and after, because they allow you to insert content into the page from CSS.

[05:38] That's almost always a bad idea to do this, because the whole purposes of CSS is to separate out styling from the content, and we'd be using it to potentially put content from a styling back into the mark up.

[05:49] Where it can be useful is in throwing in some non-essential content into the page or really some decoration. The same thing with the placeholder, the first line, and even on the first button. These are all things that should be used for adding some styling, but not necessarily for changing the content or the nature of the content.