The Developer Brains


PSEUDO ELEMENTS

Web Designing | Web Development


SEE MORE














</CSS3 PSEUDO>





The CSS3 Pseudo elements are used to change the style of the specific part of an HTML Elements i.e if we want to change the first line of an HTML element this can be done easily by pseudo elements.


SEE MORE
























</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





















div::first-letter pseudo element is used to add a special style to the first letter of the text.
1. true
2. false




Check Now



CSS3 QUIZ







Next: CSS3 Grid System


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers