/    /  CSS Pseudo-elements

CSS Pseudo-elements

 

The CSS pseudo-elements (double-colon (::)) allow you to style the elements or specified parts of elements without adding any IDs or classes to them.

 

syntax :

 

selector::pseudo-element { property: value; }

 

::first-line Pseudo-element:

 

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
 color: #ff0000;
 font-variant: small-caps;
}
</style>
</head>
<body>

<p>Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here.Enter content here. Enter content here.Enter content here.</p>

</body>
</html>

 

OUTPUT:

 

CSS Pseudo-elements

 

::first-letter Pseudo-element:

 

Used to add a special style to the first letter of a text.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
 color: #ff0000;
 font-size: xx-large;
}
</style>
</head>
<body>

<p>Enter some content here.Enter some content here.Enter some content here.</p>

</body>
</html>

 

OUTPUT:

 

CSS Pseudo-elements

 

 ::before and ::after Pseudo-element

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS ::before and ::after Pseudo-element</title>
<style>
  h1::before {
    content: url("/examples/images/marker-left.gif");
   }
  h1::after {
    content: url("/examples/images/marker-right.gif");
   }
</style>
</head>
<body>       
  <h1>This is a heading</h1>

</body>
</html>

 

OUTPUT:

 

CSS Pseudo-elements