Updated June 29, 2023
Introduction to CSS Pseudo Elements
CSS Pseudo-elements are defined as a special selector that adds special styles to an element without changing any existing document. These Pseudo-elements do not appear in the DOM but are visible on the respective websites and style particular parts of HTML elements. These are just like virtual elements, which are treated as casual HTML elements and are created using CSS.
Syntax:
It takes a form like the one below, which is very easy to code.CSS3 introduces a (:) keyword to the pseudo-elements to make a difference between the PseudoClasses. Therefore, the simple Syntax shall be given like to create CSS Pseudo Elements:
Selector ::pseudo-element { property : value; }Various CSS Pseudo Elements & Description
Below is a list of the most commonly used Pseudo Elements.
| Value | Description |
| : before | This element adds a few contents before an element needs HTML. The specific inserted content isn’t visible in the DOM tree but is shown on the current web page. |
| : after | This element adds a few contents after an element. |
| : First-letter | This element inserts special kinds of styles to the first letter of the text in a box specified in a file. |
| :first-line | This element is used to insert special kinds of styles into the initial line of the text. |
| : Selection | It Highlights the Selected Portion of the Content. |
Pseudo Elements allow a single(:) selector for all the types except:: Selection which requires (::) double Dot.
Examples to Implement CSS Pseudo Elements
Below are examples of CSS Pseudo Elements:
Example #1 – : before
This value could also insert content like counters, images, and strings into their application. I have created an HTML document with the content image enclosing in the gif format. An emoji icon is added before the content.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo of CSS ::before Pseudo-element</title>
<style>
h2::before {
content: url("emoji.gif");
}
</style>
</head>
<body>
<h2><center>This is a Emoji on the Page</center></h1>
<p><strong>Demo</strong> Displays an png image before a paragraph content<code><heading></code> is Highlighted.</p>
</body>
</html>Output:
Example #2
Adding a text before the element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS:: Before Pseudo-element</title>
<style>
h1::before {
content:" Hi welcome to the Web Page";
}
</style>
</head>
<body>
<h1>This is EDUCBA</h1>
<p>Top- Courses / programming for Everybody</p>
</body>
</html>
Example #3 – : after
This adds content after the particular elements, and it is very similar to before, except that the position of the styles gets differs. Another interesting fact of this selector is to create a different complex shape using CSS by avoiding images.
Code:
ff.html
<html>
<div id="octagon"></div>
<body>
<p> After the picture a paragraph is allowed </p>
</html>.css
#octagon {
width: 98px;
height: 98px;
background: purple;
}
#octagon:before {
height: 0;
width: 38px;
content:"";
position: absolute;
border-bottom: 28px solid purple;
border-left: 28px solid blue;
border-right: 28px solid yellow;
}
#octagon:after {
height: 0;
width: 38px;
content:"";
position: absolute;
border-top: 28px solid purple;
border-left: 28px solid blue;
border-right: 28px solid yellow;
margin: 60px 0 0 0;
}Output:
Example #4
Inserting Bullet icon after the content. The below demo shows how to add:: after element next to the content.
Code:
pseudo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS ::after Pseudo-element</title>
<style>
p::after {
content: url("bullets blue.gif");
}
</style>
</head>
<body>
<h1>This is a Online Course</h1>
<p><strong>About:</strong>Itsan world- wide Online Platform from different Universities across the globe</p>
<p>Companies Like Google and IBM Has tie-up with that.</p>
</body>
</html>Output:
And similarly, we can add borders and quotes, a great semantic element to place on some block quotes. Like assigning a grid column. And there are innovative ideas for implementing before and after in day-to-day applications.
Example #5 – first-line Element
It simply targets the first line of an element none other than. When it is inserted in a paragraph, the first line is alone styled
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS ::first-line Pseudo-element</title>
<style>
p::first-line {
font-family: Forte;
font-weight: bold;
font-size: 2em;
font-style: italic;
color: orange;
}
</style>
</head>
<body>
<h1>COVID-19 Article</h1>
<p>Top- COVID-19 is defined as illnesss caused byvirus which attacks respiratry Syndrome. And experts and Scientists are deeply into a research to identify a vaccine to recover.</p>
</body>
</html>Output:
Example #6 – First–letter
This selects the first letter in a sequence of text which goes well in using paragraphs.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS ::first-letter Pseudo-element</title>
<style>
p::first-letter {
font-family: Algerian;
font-weight: bold;
font-size: 4em;
font-style: italic;
color: #3f51b5;
}
</style>
</head>
<body>
<h1>COVID-19 Article</h1>
<p>Top- COVID-19 is defined as illnesss caused byvirus which attacks respiratry Syndrome. And experts and Scientists are deeply into a research to identify a vaccine to recover.</p>
</body>
</html>Output:
The below code snippet shows – That the <p> element in the HTML document adds a Style to Initial Capital Letter ‘T’. We can adjust the Letter size with the ‘Line-Height’.
Example #7 – :: selection
It highlights the text the user selects, just like highlighting with the mouse-pointing device. We set the color and background in the example while verifying other CSS properties like text alignment.
Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>Comics are a great fun And the first nivel Appeared in the Year 1978 and it deals with the current affairs of the world</p>
</body>
</html>
::selection {
color: grey;
background: red;
}Output:
The below output shows that the above code highlights the content with the colors.
Conclusion
Therefore, we have discussed concepts on pseudo Elements to create techniques practically and with exploring examples also how to take on selectors in CSS to imply content or styles to the new content. And this has been paying attention in the front-end development. And this Element is highly beneficial and provides some easy solutions when an element needs to be styled.
Recommended Articles
We hope that this EDUCBA information on “CSS Pseudo Elements” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
