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 does not appear in the DOM but visible on the respective websites and it styles particular parts of HTML elements. These are just like a virtual element which are treated as a casual HTML element such that they are created using CSS.
Syntax:
It takes a form like below which is very easy to code.CSS3 introduces a (:) keyword to the pseudo-elements to make 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
Most commonly used Pseudo Elements are listed below:
| Value | Description |
| : before | This element is used to add a few contents before an element with the need for HTML. The specific inserted content doesn’t visible in the DOM tree but shown at the current web page. |
| : after | This element is used to add a few contents after an element. |
| : First-letter | This element is used to insert 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 to the initial line of the text. |
| : Selection | It Highlights the Selected Portion of the Content. |
Pseudo Elements allow single(:) selector for all the types except:: Selection which requires (::) double Dot.
Examples to Implement CSS Pseudo Elements
Below are the examples of CSS Pseudo Elements:
Example #1 – : before
This value could insert the content like counters, images, and strings as well to their application. Here I have created an HTML document with the content image enclosing in the format gif. 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>
4.5 (4,332 ratings)
View Course
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. 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 which is a great semantic element to place on some block quotes. Like by assigning grid-column. And there are innovative ideas for implementing before and after in day-today 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 – To the <p> element in HTML document it 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 selected by the user just like highlighting with the mouse pointing device. Here in the example we set it to color and the background while other CSS properties like text-alignment too could be verified.
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 in selector in CSS to imply a content or styles to the new content. And this 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
This is a guide to CSS Pseudo Elements. Here we discuss a brief overview on CSS Pseudo Elements and its different examples along with its code implementation. You can also go through our other suggested articles to learn more –
