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

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

CSS First-Letter First-Line Pseudo Elements

About The Author

No comments:

Labels