CSS Pseudo Class and Element
Pseudo Classes:
A CSS pseudo-class selector matches components based on an additional condition and not necessarily defined by the document tree. It starts with a (:) colon
Syntax:
selector:pseudo-class { property: value; }
Ex.
<style type="text/css">
a:link {
color: blue;
}
a:visited {
text-decoration: none;
}
</style>
Pseudo Element:
The CSS pseudo-elements is a way to style elements of the document. Used double-colon (::) to define it.
Ex.1
<style type="text/css">
p::first-line {
color: red;
font-variant: small-caps;
}
</style>
Output:
the output of the paragraph looks like that:
Hi my name
Naveen Kumar
Ex 2.
<style type="text/css">
h1::before {
content: url("/examples/images/marker-left.gif");
}
h1::after {
content: url("/examples/images/marker-right.gif");
}
</style>