</Use of Pseudo Elements>

How to use a Pseudo Elements?

Here is the simple example of a pseudo element.

::first-letter Pseudo-element
This pseudo element is used to add a special style to the first letter of the text.

example
Here we can use multiple css properties to change the style of the first letter of an HTML elements.


<style>
/*Pseudo Element Example*/
element-selector::pseudo-element {
property: value;
}
</style>


	

<head>
	<style>
div::first-letter {
  color: red;
  font-size: 50px;
}
	</style>
</head>
<body>
	<div>TDB-School</div>
</body>

Try it Yourself

::first-line Pseudo-element

Here is the simple example of a pseudo element.

::first-letter Pseudo-element
This pseudo element is used to add a special style to the first letter of the text.

example
Here we can use multiple css properties to change the style of the first letter of an HTML elements.


<style>
/*Pseudo Element Example*/
div::first-line {
  color: red;
  font-size: 50px;
}
</style>

Note: We can apply ::first-line pseudo-element only on HTML block-level elements.


	

<head>
	<style>
div::first-line {
  color: red;
  font-size: 50px;
}
	</style>
</head>
<body>
	<div>TDB-School<br> TDB-Tutorial</div>
</body>

Try it Yourself

Other pseudo elements

We can also use multiple pseudo elements on single block level HTML Tag.

Multiple pseudo elements


<style>
div::first-letter {
  color: red;}
div::first-line {
  color: red;}
</style>

::before Pseudo-element


<style>
/*Pseudo Element Example*/
div::before {
content:"your text";
}
</style>


<head>
	<style>
div::before {
content:"your text"
}
div::first-letter {
  color: red;}
	</style>
</head>
<body>
	<div>TDB-School<br> TDB-Tutorial</div>
</body>

Try it Yourself

PSEUDO ELEMENTS

</CSS3 PSEUDO>

</Use of Pseudo Elements>

How to use a Pseudo Elements?

::first-line Pseudo-element

Other pseudo elements