CSS Pseudo Elements: Pseudo-elements allow you to have finer control in styling text. You can use pseudo-elements for headers, paragraphs, etc. Two common pseudo-elements are “first-letter” and “first-line”. The “first letter” pseudo-element allows you to style the first letter of a paragraph, header, or another HTML element, while the “first-line” pseudo-element applies a style to the first line of an HTML element. In order to apply a pseudo-element, first, type the name of the HTML element and add a colon and then type the name of pseudo-element as follows:
CSS Pseudo Elements Syntax
selector:pseudo-element
{
property value;
property value;
}
CSS Pseudo Elements Example
Now let’s practice writing comments and using pseudo-elements in our CSS code. Add the following CSS code to your “styles.css” file:
/* This code styles the first
letter of every item in a list */
li:first-letter
{
font-weight:bold;
font-size:30px;
}
CSS Pseudo Elements Example Output
Save your “styles.css” file. Next, open your “index.html” file and click “Run” on your Notepad++ taskbar to launch this file in Chrome or the browser of your choice. Your browser window should appear as follows:
NOTE: The first letter of each item in the ordered list is styled differently so that it stands out.