View video tutorial
CSS Pseudo-Element
CSS
CSS pseudo-elements are keywords that are used to style a specific, abstract part of an element when combined with selectors.
CSS pseudo-element
➔ CSS pseudo-elements are used to select a specific, abstract part of an element with a selector and apply CSS to that part.
➔ These are marked with a double colon (::), such as ::before or ::after.
Common CSS Pseudo-elements.
Pseudo-classes can be divided into several categories based on their functionality.
::before{}Inserts generated content before the existing content of an element.::after:{}Inserts generated content after the existing content of an element.::first-letter{}Styles the first letter of a text.::first-line{}Style only the first line of text.::selection{}Styles the color and background of the selected text.::placeholder{}Styles placeholder text in form input fields and text areas.::marker{}Styles the automatically generated markers of list items.
Syntax
selector::pseudo-element-name {CSS properties};
Syntax description.
| Value | Description |
|---|---|
| selector | Specifies any CSS selector. Such as div, a, input, etc. |
| :pseudo-element-name | Specifies any CSS pseudo-element. For example ::before{}, ::after{}, ::first-letter{} etc. |
| CSS properties | Specifies any CSS property enclosed in {}, such as {color: #fff;background-color: red;} |
p::first-letter {
font-size: 2em;
color: red;
}
p::selection {
background-color: yellow;
color: black;
}
input::placeholder {
color: gray;
opacity: 1;
}
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>CSS pseudo-class example</title>
<style>
p::first-letter {
font-size: 2em;
color: red;
}
p::selection {
background-color: magenta;
color: black;
}
input::placeholder {
color: pink;
opacity: 1;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter Name">
<h3>CSS pseudo-element example</h3>
<p>Note ::first-letter{} Styles the first letter of a text.</p>
<p>Note ::selection{} Styles the color and background of the selected text.</p>
<p>Note ::placeholder{} Styles placeholder text in form input fields and text areas.</p>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.