Make the first letter special in a text 


<html>
<head>
<style type="text/css">
p:first-letter 
{
color: #ff0000;
font-size:xx-large
}
</style>
</head>

<body>
<p>
You can use the :first-letter pseudo-element to add a special effect to the first letter of a text!
</p>
</body>

</html>
 

 

Make the first line special in a text







You can use the :first-line pseudo-element to add a special effect to the first line of a text!





 

 

Make the first letter and first line special







You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!


 

Use :before to insert some content before an element (Does not work in IE)






This is a header

 


The :before pseudo-element can be used to insert some content before the content 
of an element.






 

 

Use :after to insert some content after an element (Does not work in IE)






This is a header

 


The :after pseudo-element can be used to insert some content after the content 
of an element.


 

:first-child - change first child

 

 

 





I am a strong man.

 

I am a strong man.

 

Note: For :first-child to work in IE a DOCTYPE must be declared.





 

 

Result

I am a strong man.

I am a strong man.

Note: For :first-child to work in IE a DOCTYPE must be declared.
 

 

:first-child - change the first in all

elements


 





I am a strong man. I am a strong man.


I am a strong man. I am a strong man.



Note: For :first-child to work in IE a DOCTYPE must be declared.





 

 

Result:

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Note: For :first-child to work in IE a DOCTYPE must be declared.

 

:first-child - change all elements in first child


 

 





 


 

Make the first letter and first line special







You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!




 

 

Use :before to insert some content before an element (Does not work in IE)






This is a header



The :before pseudo-element can be used to insert some content before the content 
of an element.






 

Use :after to insert some content after an element (Does not work in IE)






This is a header



The :after pseudo-element can be used to insert some content after the content 
of an element.




 

 

:first-child - change first child

 

 

 





I am a strong man.


I am a strong man.



Note: For :first-child to work in IE a DOCTYPE must be declared.





 

Result

I am a strong man.

I am a strong man.

Note: For :first-child to work in IE a DOCTYPE must be declared.
 

 

:first-child - change the first in all

elements


 





I am a strong man. I am a strong man.


I am a strong man. I am a strong man.



Note: For :first-child to work in IE a DOCTYPE must be declared.





 

 

Result:

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Note: For :first-child to work in IE a DOCTYPE must be declared.

 

:first-child - change all elements in first child


 

 





I am a strong man. I am a strong man.


I am a strong man. I am a strong man.



Note: For :first-child to work in IE a DOCTYPE must be declared.





 

 

Result:

I am a strong man. I am a strong man.

I am a strong man. I am a strong man.

Note: For :first-child to work in IE a DOCTYPE must be declared.