CSS pseudo elements

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

pseudo elements

CSS pseudo-elements select elements not based on their names, but by the formatting of those elements.

For example, when you want to set the style for first-line or first-letter of an element (say a paragraph), you can not do that by simply selecting the p element. You need to use CSS pseudo-element in these cases.

CSS pseudo-elements always start with a ":".

syntax:

elementName:CSS_Pseudo_element{ CSS-Property: value; ........................ }

CSS :first-line pseudo element

CSS :first-line pseudo-elements are used to describe style for the first line of an HTML element.

Example of CSS :first-line pseudo element

CSS code:

p:first-line {
text-transform: uppercase; 
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS first line pseudo element </title>
<link rel='stylesheet' href='Example-of-CSS-first-line-pseudo-element.css' type='text/css'>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
</div>
</body>
</html>

View this example of CSS first line pseudo element in a separate browser window.

CSS :first-letter pseudo element

CSS :first-letter pseudo elements are used to describe style for first letter of an HTML element.

Example of CSS :first-letter pseudo element

CSS code:

p:first-letter {
text-transform: uppercase; /* to set the first letter in uppercase */ 
color: red; /* to set the first letter in red */
font-size: 32px; /* to set the first letter size 32px */
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS first letter pseudo element </title>
<link rel='stylesheet' href='Example-of-CSS-first-letter-pseudo-element.css' type='text/css'>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a urna elit. Integer malesuada tempus enim nec rhoncus. Aenean tempus adipiscing porttitor.</p>
</div>
</body>
</html>

View this example of CSS first-letter pseudo element in a separate browser window.

CSS :before and :after pseudo elements

CSS :before pseudo-element is used to generate content before an HTML element.

CSS :after pseudo-element is used to generate content after an HTML element.

CSS code:

 h1:before {
content: url("/images/arrow1.png")
}
h2:after {
content: url("/images/green-tick.png")
}

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of CSS before and after pseudo elements</title>
<link rel='stylesheet' href='Example-of-CSS-before-and-after-pseudo-elements.css' type='text/css'>
</head>
<body>
<h1>w3resource tutorials</h1>
<h2>w3resource CSS examples </h2>
</body>
</html>

View this example of CSS :before and :after pseudo elements in a separate browser window.

Previous: CSS pseudo classes
Next: CSS background properties