CSS First-Letter First-Line Pseudo Elements

CSS Pseudo Elements are used to modify and add special effects to some selectors. For example to modify the first line or letter of a paragraph, you can use the :first-line and :first-letter pseudo elements. You can either increase the font size or even apply an image if you wish.

Let’s see how to use the :first-letter and :first-line pseudo elements and give a nice effect to your first paragraph:

<head>
<title>CSS Psuedo Elements first-letter and first-line
(from DevCurry.com)</title> 
<style type="text/css">
.lor:first-letter {
font-size: 2em;
}
.lor:first-line {
color:Blue;
font-style: italic;        
}
</style>   
</head>
<body>
<p class="lor">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod  tempor incididunt ut labore et 
dolore magna liqua.
</p>
<p>
Neque porro quisquam est qui dolorem ipsum quia
dolor sit amet, consectetur, adipisci velit
</p>
</body>
</html>

If you observe, the first para is decorated with the ‘lor’ class. The :first-letter increases the font size of the first letter in the paragraph, in our case ‘L’. The :first-line adds a blue font color and changes the text to italics. The result is as shown below:
CSS Pseudo Elements

No comments:

Post a Comment