CSS Pseudo Elements
- Introduction to CSS Pseudo Elements
- Syntax of CSS Pseudo Elements
- List of CSS Pseudo Elements
- Example of CSS Pseudo Elements
Introduction to CSS Pseudo Elements
Most of the time, there is confusion in understanding CSS pseudo elements and pseudo-classes as the same. But I would like to tell you that these are not the same. The difference between them has been explained below clearly.
CSS pseudo-classes targets such states of elements, which have no information in the document tree and can't be targeted by the normal CSS selectors.
For example, a normal selector is not available to target active, hover, etc. states of a link. For this, you can use pseudo-classes such as : hover, :active, etc.
If we’ll discuss on CSS pseudo elements, then such elements can be created by pseudo elements, those are not already available in the document tree. For example, you can add another content before the content of an element by using CSS before pseudo element.
No element is targeted by CSS pseudo elements rather a special part of the element is targeted. For example, you can target the first line of a paragraph by using CSS first line pseudo-element.
All these elements will be explained further in detail. But before that, let's try to understand the syntax of this element.
Syntax of CSS Pseudo Elements
The general syntax for CSS pseudo elements has been given below.
selector :: pseudo-element-name
{
property: value;
}
As you can see in the above syntax, the first double colons (: :) is used before the pseudo elements.
You can differentiate any pseudo class and pseudo element through double colons. You will have to use double colons(::) before pseudo elements and single colon(:) before pseudo class.
List of CSS Pseudo Elements
CSS has five pseudo elements. You can see the list as below.
- :: after
- :: before
- :: first-letter
- :: first-line
- :: selection
Example of CSS Pseudo Elements
All available pseudo elements in CSS have been explained below with examples.:: after
This CSS after pseudo-element is used to add some more content after the contents of the specified element. For example, by this ::after selector, you can add some special text after the text of all the paragraphs of a webpage.
The content property is used to define the content which you want to add. This has been explained by the below example.
The content property is used to define the content which you want to add. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> After Pseudo Element Example </title>
<style>
#p1::after
{
content:" - D. Smith.";
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p2::after
{
content:" - R. Donald.";
background: yellow;
color: green;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p3::after
{
content:" - A. Robert.";
background: lightgray;
color: red;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<p id="p1"> This is the first paragraph about after pseudo element which is written by </p>
<p id="p2"> This is the second paragraph about after pseudo element which is written by </p>
<p id="p3"> This is the third paragraph about after pseudo element which is written by </p>
<style>
#p1::after
{
content:" - D. Smith.";
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p2::after
{
content:" - R. Donald.";
background: yellow;
color: green;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p3::after
{
content:" - A. Robert.";
background: lightgray;
color: red;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<p id="p1"> This is the first paragraph about after pseudo element which is written by </p>
<p id="p2"> This is the second paragraph about after pseudo element which is written by </p>
<p id="p3"> This is the third paragraph about after pseudo element which is written by </p>
</body>
</html>
The above example will produce the below output.
:: before
This CSS before pseudo-element is used to add some content before the content of the specified element. For example, through this ::before selector, you can add some text before any paragraphs of a webpage.
The content property is used to add content like :: after pseudo element. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Before Pseudo Element Example </title>
<style>
#p1::before
{
content:" First paragraph";
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p2::before
{
content:" Second paragraph";
background: yellow;
color: green;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p3::before
{
content:" Third paragraph";
background: lightgray;
color: red;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<p id="p1"> - about after pseudo element which is written by D. Smith. </p>
<p id="p2"> - about after pseudo element which is written by R. Donald. </p>
<p id="p3"> - about after pseudo element which is written by A. Robert. </p>
<style>
#p1::before
{
content:" First paragraph";
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p2::before
{
content:" Second paragraph";
background: yellow;
color: green;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
#p3::before
{
content:" Third paragraph";
background: lightgray;
color: red;
font-weight: bold;
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<p id="p1"> - about after pseudo element which is written by D. Smith. </p>
<p id="p2"> - about after pseudo element which is written by R. Donald. </p>
<p id="p3"> - about after pseudo element which is written by A. Robert. </p>
</body>
</html>
The above example will produce the below output.
:: first-letter
With this CSS first letter pseudo-element, you can target the first letter of an element's content. For example, through this ::first-letter selector, you can make the first letter of the text of all the paragraphs of a webpage bold and capital.
You can use color, padding, margin, background, line-height, verticle-align, text-decoration, text-transform, float, font-style, border, font-size, and clear, etc. with this pseudo-element properties. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> First-letter Pseudo Element Example </title>
<style>
#p1::first-letter
{
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
border: 2px solid red;
padding: 10px;
margin-left: 20px;
line-height: 50px;
}
#p2::first-letter
{
background: yellow;
color: green;
font-weight: bold;
font-size: 20px;
font-style: italic;
border: 2px solid green;
padding: 10px;
margin-left: 20px;
line-height: 50px;
}
#p3::first-letter
{
background: lightgray;
color: red;
font-weight: bold;
font-size: 20px;
font-style: italic;
border: 2px solid black;
padding: 10px;
margin-left: 20px;
line-height: 50px;
}
</style>
</head>
<body>
<h1>CSS First-Letter Pesudo Element</h1>
<p id="p1"> First paragraph about after pseudo element which is written by by D. Smith. </p>
<p id="p2"> Second paragraph about after pseudo element which is written by R. Donald. </p>
<p id="p3"> Third paragraph about after pseudo element which is written by A. Robert. </p>
<style>
#p1::first-letter
{
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
border: 2px solid red;
padding: 10px;
margin-left: 20px;
line-height: 50px;
}
#p2::first-letter
{
background: yellow;
color: green;
font-weight: bold;
font-size: 20px;
font-style: italic;
border: 2px solid green;
padding: 10px;
margin-left: 20px;
line-height: 50px;
}
#p3::first-letter
{
background: lightgray;
color: red;
font-weight: bold;
font-size: 20px;
font-style: italic;
border: 2px solid black;
padding: 10px;
margin-left: 20px;
line-height: 50px;
}
</style>
</head>
<body>
<h1>CSS First-Letter Pesudo Element</h1>
<p id="p1"> First paragraph about after pseudo element which is written by by D. Smith. </p>
<p id="p2"> Second paragraph about after pseudo element which is written by R. Donald. </p>
<p id="p3"> Third paragraph about after pseudo element which is written by A. Robert. </p>
</body>
</html>
The above example will produce the below output.
:: first-line
This CSS first line pseudo-element is used to target the first line of an element's content. For example, through this ::first-line selector, you can show the first line of content of all the paragraph elements in bold on the webpage.
With this CSS pseudo element, you can use properties such as font, color, word-spacing, letter-spacing, background, text-decoration, text-transform, verticle-align, line-height and clear, etc. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> First-line Pseudo Element Example </title>
<style>
p:first-line
{
font: sans-serif;
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
line-height: 50px;
letter-spacing: 4px;
word-spacing: 4px;
text-decoration: underline overline;
text-transform: capitalize;
}
</style>
</head>
<body>
<p> this is first paragraph first line. </br>
this is first Paragraph second line. </p>
<p> this is second paragraph First line. </br>
this is second paragraph second line. </p>
<style>
p:first-line
{
font: sans-serif;
background: lightpink;
color: blue;
font-weight: bold;
font-size: 20px;
font-style: italic;
line-height: 50px;
letter-spacing: 4px;
word-spacing: 4px;
text-decoration: underline overline;
text-transform: capitalize;
}
</style>
</head>
<body>
<p> this is first paragraph first line. </br>
this is first Paragraph second line. </p>
<p> this is second paragraph First line. </br>
this is second paragraph second line. </p>
</body>
</html>
The above example will produce the below output.
:: selection
This :: selection pseudo-element is used to target part of the element which is selected by the user. For example, through this pseudo-element, you can set the background, cursor, outline, color, and color of the text selected by the user.
For the Firefox browser, this variant of the pseudo-element is used below.
:: - moz-selection
With CSS ::selection pseudo-element, you can use properties such as colors, background, font, etc. This has been explained by the below example.
<!DOCTYPE html>
<html>
<head>
<title> Selection Pseudo Element Example </title>
<style>
::selection
{
background-color: lightgreen;
color: blue;
}
::-moz-selection /*Use this code for Firefox Browser*/
{
background-color: lightgreen;
color: blue;
}
</style>
</head>
<body>
<p> When you select text background will be lightgreen, text color will be blue. </p>
<style>
::selection
{
background-color: lightgreen;
color: blue;
}
::-moz-selection /*Use this code for Firefox Browser*/
{
background-color: lightgreen;
color: blue;
}
</style>
</head>
<body>
<p> When you select text background will be lightgreen, text color will be blue. </p>
</body>
</html>
The above example will produce the below output.
0 Comments:
Post a Comment
Thank you for reading this post. Please do not enter any spam link in the comment box.