Pseudo-Element
pseudo element provide you with a flexibility to apply styles part of the content such as a first letter or first line.The pseudo-elements can also be used to insert the content after or before an element.
- Style the first letter, or line, of an element
- Insert content before, or after, the content of an element
Syntax
selector::pseudo-element
{
property: value;
}
| pseudo-element | Description |
|---|---|
| ::first-letter | It selects the first letter of the text. |
| ::first-line | It styles the first line of the text. |
| ::before | It is used to add something before the element's content. |
| ::after | It is used to add something after the element's content. |
| ::selection | It is used to select the area of an element that is selected by the user. |
| :focus | It selects the element which is focused by the user currently. |
| :first-child | It adds special effects to an element, which is the first child of another element. |
<html>
<head>
<title>CSS</title>
<style>
h6:first-letter
{
font-size:1in;
color:blue;
}
h6:first-line
{
color:green;
}
</style>
</head>
<body>
<div>
<h6>Welcome to the mktutorial.in This site is developed so that students may learn computer science related technologies easily. The mktutorial.in is committed to provide easy and in-depth tutorials on various technologies</h6>
</div>
</body>
</html>
Output
Welcome to the mktutorial.in This site is developed so that students may learn computer science related technologies easily. The mktutorial.in is committed to provide easy and in-depth tutorials on various technologies
The ::before pseudo-element
It allows us to add something before the element's content. It is used to add something before the specific part of an element. Generally, it is used with the content property.
We can also add the regular strings or images before the content using this pseudo-element.
<html>
<head>
<title>CSS</title>
<style>
h1::before
{
content: "'Hello World.'";
color:red;
}
</style>
</head>
<body>
<h1>Welcome to the mktutorial.in</h1>
<strong>This is an example of ::before pseudo-element. </strong>
<h3>In the first line the "Hello World" has added by using the pseudo-element ::before</h3>
</body>
</html>
Output
Welcome to the mktutorial.in
This is an example of ::before pseudo-element.In the first line the "Hello World" has added by using the pseudo-element ::before
The ::after pseudo-element
It works similar to ::before pseudo-element, but it inserts the content after the content of the element. It is used to add something after the specific part of an element. Generally, it is used with the content property.
It also allows us to add regular strings or images after the content.
<html>
<head>
<title>CSS</title>
<style>
h5::after
{
content: "Welcome to the mktutorial.in.";
color:red;
}
</style>
</head>
<body>
<h5>Hello world</h5>
<h2g>This is an example of :after pseudo-element. </h2>
<h3>In the first line the "Welcome to the mktutorial.in." has added by using the pseudo-element ::after</h3>
</body>
</html>