CSS PSEUDO-ELEMENT
- A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected elements.
- Styling the first letter or line of an element, and Inserting content before or after the content of an element.
- All of these can be done using Pseudo Elements in CSS.
SYNTAX
selector::pseudo-element
{
property: value;
}
EXAMPLE
<html lang="en">
<head>
<title>first-line Demo</title>
<style>
<body>
{
background-color:whitesmoke;
color:green;
font-size:medium;
texr-align:center;
}
p::first-line
{
color: Red;
font-weight:bo;d;
}
</style>
</head>
<body>
<h1>::first-line element</h1>
<p>
This is a paragraph using first-line
pseudo-element to style first line of the paragraph.
content in the line turns red and becomes blod.
</p>
</body>
</html>
OUTPUT
::first-line element
This is a paragraph using first-line
pseudo-element to style first line of
the paragraph. Content in the first
line turns red and becomes bold.
