Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS Pseudo-element :first-line


previous next AddThis Social Bookmark Button


Advertisements

Description:

The :first-line pseudo-element is used to add special effect to the first line of a text.

The following properties apply to the this pseudo- element:

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Example:

Following is the example which demonstrates how to use :first-line element to add special effect to the first line of elements in the document .

<style type="text/css">
p:first-line { text-decoration: underline; }
p.noline:first-line { text-decoration: none; }

</style>
<p class="noline"> This line would not have any underline
because this belongs to nline class.</p>

<p>The first line of this paragraph will be underlined
as defined in the CSS rule above. Rest of the lines in this
paragraph will remain normal. This example shows how to use
:first-line pseduo element to give effect to the first line
of any HTML element.</p>

This will produce following black link:

This line would not have any underline because this belongs to nline class.

The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal. This example shows how to use :first-line pseduo element to give effect to the first lines of any HTML element.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements