CSS PSEUDO-ELEMENT

rainbow baker

 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

<!DOCTYPE html>
<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.
        

Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send