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

Will you give this article a +1 ? Thanks in advance


About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook

Follow him on twitter @suprotimagarwal

No comments: