Pseudo-elements for Content
Adding content before or after an element, styling list markers, and more all become possible with pseudo-elements for content.
The CSS ::before Pseudo-element
To add something in front of the content of an element, use ::before, and state what to add in the content property.
Example
Each <h3> element gets an image in front of its content.
Prompt
Demonstrate the ::before pseudo-element. Insert an image (smiley.gif) before the content of each h3 element using the content property. Include a couple of h3 headings with text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::before Pseudo-element</title>
<style>
h3::before {
content: url(https://prompt-cookbook.com);
}
</style>
</head>
<body>
<h2>The ::before Pseudo-element</h2>
<h3>This is a heading</h3>
<p>The ::before pseudo-element inserts content before the content of each h3 element.</p>
<h3>This is another heading</h3>
<p>Each h3 heading gets a smiley image before it.</p>
</body>
</html>
The CSS ::after Pseudo-element
Its counterpart, ::after, adds what the content property names at the end of the content of an element.
Example
Each <h3> element gets an image following its content.
Prompt
Demonstrate the ::after pseudo-element. Insert an image (smiley.gif) after the content of each h3 element using the content property. Include a couple of h3 headings with text.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::after Pseudo-element</title>
<style>
h3::after {
content: url(https://prompt-cookbook.com);
}
</style>
</head>
<body>
<h2>The ::after Pseudo-element</h2>
<h3>This is a heading</h3>
<p>The ::after pseudo-element inserts content after the content of each h3 element.</p>
<h3>This is another heading</h3>
<p>Each h3 heading gets a smiley image after it.</p>
</body>
</html>
The CSS ::marker Pseudo-element
List item markers (bullets or numbers) can be styled with ::marker.
Example
Here the list item markers get their own style.
Prompt
Demonstrate the ::marker pseudo-element. Style the list item markers with color: red and font-size: 23px. Include both an unordered and ordered list.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::marker Pseudo-element</title>
<style>
::marker {
color: red;
font-size: 23px;
}
</style>
</head>
<body>
<h2>The ::marker Pseudo-element</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
The CSS ::selection Pseudo-element
Whichever part of a text the user selects can be styled with ::selection.
Example
Text selected by the user turns red on a yellow background.
Prompt
Demonstrate the ::selection pseudo-element. Style the user-selected text with color: red and background: yellow. Include a paragraph of text that the user can select to see the effect.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::selection Pseudo-element</title>
<style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h2>The ::selection Pseudo-element</h2>
<p>Select some of this text to see the ::selection effect. The selected text will appear in red with a yellow background.</p>
</body>
</html>
The CSS ::backdrop Pseudo-element
The area behind a dialog box or popover element can be styled with ::backdrop.
Example
Here the area behind a dialog box gets a style of its own.
Prompt
Demonstrate the ::backdrop pseudo-element. Create a dialog element with a button to open it. Style the backdrop behind the dialog with background-color: lightgreen using dialog::backdrop.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The ::backdrop Pseudo-element</title>
<style>
dialog::backdrop {
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>The ::backdrop Pseudo-element</h2>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
<dialog id="myDialog">
<h3>Dialog Box</h3>
<p>This dialog has a light green backdrop.</p>
<button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>
</body>
</html>