CSS make first line stand out

You can make a cool effect where the first line of a paragraph stands out using a special CSS pseudo-element. This can make the content on a page more appealing.

The :first-line pseudo-class

Attach the :first-line pseudo-class to the paragraph (in the stylesheet) whose first line you want to affect.

Example:
/*The css that will affect the first line*/ p.one:first-line {color: #517d62; font-weight:bold;} <!-- the paragraph whose first line will be affected --> <p class="one"> Once upon a time in a land far far away there lived a goat...... The goat liked eating grass...... </p>
Output:

Once upon a time in a land far far away there lived a goat. The goat was kind and gentle as goats tends to be. The goat liked eating grass, running around on the hill, and amusing children who came to see him. They named the goat Billy as that seemed like a fitting name for a goat.

Alternatively, you can make just the first letter of a paragraph stand out. Learn how to do this in our CSS make first letter stand out tutorial.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information