CSS pseudo elements are used to style parts of an element without giving particular Id or class to them.
Uses of pseudo elements:-
- Used to style or add effect to the first letter or first element from the list of elements.
- With the help of this content can be added before or after the targeted element.
Syntax of Pseudo-element:-
selector::pseudo-element {
property:value;
}
Here are some pseudo elements:-
- ::first-line- Used to add style to only the first line of the selected element.
- ::first-letter- Used to add style to the first letter of the selected element.
- ::before- Add content before the selected element.
- ::after- Add content after the selected element.
- ::placeholder- Used to style the placeholder of an input box.
Below is the example of ::first-line and ::first-lettter:-
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-element</title>
</head>
<style type="text/css">
div{
width: 500px;
}
p::first-letter {
color: #990033; /*style to be added to the first letter of p tag*/
font-size: 40px;
font-weight: bold;
}
p::first-line {
color: #004080; /*style to be added to the first line of p tag*/
background-color: #ffcc99;
text-decoration: underline;
font-size: 18px;
}
</style>
<body>
<div>
<p>CSS pseudo elements are used to style parts of an element without giving particular Id or class to them.</p>
</div>
</body>
</html>
Here is the link of above code:-
Below is the example of ::before and ::after:-
<!DOCTYPE html>
<html>
<head>
<title>Pseudo-elements</title>
</head>
<style type="text/css">
h1::before {
content: "///"; /*content to be added before the selected element*/
color: red;
}
h3::after {
content: "***"; /*content to be added after the element*/
color: green;
}
</style>
<body>
<div>
<h1>This is a heading</h1> <!-- before element will be applied to this -->
<h3>The ::before pseudo-element inserts content before the content of an element.</h3> <!-- after element will be applied to this -->
<h1>This is a heading</h1><!-- before element will be applied to this also -->
<h3>IE8 supports the content property only if a !DOCTYPE is specified.</h3><!-- after element will be applied to this also -->
</div>
</body>
</html>
Here is the link of above code:-
0 Comment(s)