CSS pseudo elements are keywords that can be added to an HTML element’s CSS selector, in order to style a certain piece of that element.
Using pseudo element code you can pinpoint how you would like a portion of an html element to be styled.
Styling the first letter
For example, you can style the first line – or even the first letter – of a heading, sentence, div or paragraph so that it appears different from the rest of your text.
In this example we will first create some content/text and make sure it lives inside two heading 3 (“h3”) tags, like this:
<h3>Here is my heading. I am going to pinpoint the first letter of this section in order to do something a little different with it.</h3>
Then we’ll add a bit of code to the CSS as follows:
h3::first-letter {
color: gold;
font-size: 24px;
font-weight: bold;
border: 1px solid gray;
}
This will be the result as displayed in the browser:
Here is my heading. I am going to pinpoint the first letter of this section in order to do something a little different with it.
Styling the first line
We can also single out the first line of a html element and style it in a unique way.
NOTE: this technique only works on block elements, and not on inline elements.
In the following example we are using a CSS ID selector and assigning it to a specific DIV element. Next we are selecting the first line within that DIV:
<div id="firstLine">Here is my heading. I am going to pinpoint the first line of this section in order to do something a little different with it. CSS is so much fun to work with, isn't it?</div>
Then we’ll add a bit of code to the CSS as follows:
div #firstLine::first-line {
color: navy;
font-size: 19px;
border: 1px solid gray;
}
This will be the resulting output in the browser:
CSS pseudo elements and CSS pseudo classes are closely related. To learn a little about how pseudo classes work, please check out this article.
Thank you for reading, and please share this article and/or leave a comment below!
