Please note, this is a STATIC archive of website www.w3resource.com from 19 Jul 2022, cach3.com does not collect or store any user information, there is no "phishing" involved.
w3resource

CSS pseudo elements

 

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" "https://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" "https://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" "https://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