CSS Pseudo-elements
Pseudo Classes and ElementsIn this lesson, we will learn about pseudo elements and how to apply them in CSS.
What are CSS Pseudo-elements?
CSS Pseudo-elements are used to style specific parts of an HTML element, without the need to add extra HTML markup. They allow you to target and style content that doesn't exist in the actual HTML document structure. Pseudo-elements are preceded by double colons (::) and are used to create effects or style elements like the first letter or line of text, or to insert content before or after an element.
Here is the list of commonly used CSS Pseudo-elements.
- ::before
- ::after
- ::first-line
- ::first-letter
- ::selection
- ::placeholder
- ::marker
- ::file-selector-button
::before
The ::before Pseudo-element allows you to insert content before the content of an element. It's often used for decorative elements or icons.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before Example</title>
<!-- Internal CSS -->
<style>
p::before {
content: "🌝";
margin-right: 3px;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>::after
The ::after Pseudo-element is similar to ::before, but it inserts content after the content of an element.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::after Example</title>
<!-- Internal CSS -->
<style>
p::after {
content: "🔥";
margin-left: 3px;
}
</style>
</head>
<body>
<p>This is a paragraph of text.</p>
</body>
</html>::first-line
The ::first-line Pseudo-element selects and styles the first line of text within an element. It's useful for customizing text formatting.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::first-line Example</title>
<!-- Internal CSS -->
<style>
p::first-line {
color: darkviolet;
font-weight: bold;
text-decoration: underline;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</body>
</html>::first-letter
The ::first-letter Pseudo-element selects and styles the first letter of text within an element. It's often used for drop caps or decorative initial letters.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::first-letter Example</title>
<!-- Internal CSS -->
<style>
p::first-letter {
color: red;
font-weight: bold;
font-size: 32px;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</body>
</html>::selection
The ::selection Pseudo-element styles the portion of text that a user selects with their mouse cursor.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::selection Example</title>
<!-- Internal CSS -->
<style>
p::selection {
background-color: darkviolet;
color: white;
}
</style>
</head>
<body>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</body>
</html>::placeholder
The ::placeholder Pseudo-element styles the placeholder text that appears inside form input fields and text areas.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::placeholder Example</title>
<!-- Internal CSS -->
<style>
input::placeholder {
color: darkviolet;
font-style: italic;
}
textarea::placeholder {
color: red;
font-style: italic;
font-size: 16px;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your name"><br><br>
<textarea rows="10" cols="50" placeholder="Enter your address"></textarea>
</body>
</html>::marker
The ::marker Pseudo-element styles the marker of list items in ordered and unordered lists.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::marker Example</title>
<!-- Internal CSS -->
<style>
.list1 li::marker {
color: red;
font-style: italic;
font-weight: bold;
}
.list2 li::marker {
content: counter(list-item) ') ';
color: blue;
font-weight: bold;
}
.list3 li::marker {
color: darkviolet;
font-size: 18px;
}
.list4 li::marker {
content: "👉 ";
margin-right: 10px;
}
</style>
</head>
<body>
<ol class="list1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ol class="list2">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<ul class="list3">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul class="list4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>In the above example, the counter(list-item) function is used to access the list item’s ordinal number and decorate it with custom strings.
::file-selector-button
The ::file-selector-button Pseudo-element styles the button in file input elements that allows users to choose files for upload.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::file-selector-button Example</title>
<!-- Internal CSS -->
<style>
input[type="file"]::file-selector-button {
background-color: #0077FF;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="file"]::file-selector-button:hover {
background-color: #1AA42A;
}
</style>
</head>
<body>
<input type="file">
</body>
</html>