CSS :first-line pseudo-element


The :first-line pseudo-element adds a special style to the first line of a text.


The "first-line" pseudo-element is used to add special styles to the first line of the text in a selector:

p {font-size: 12pt}
p:first-line {color: #FF0000;font-variant:
<p>Some text that ends up on two 
or more lines</p>

The output could be something like this:

Some text that ends
up on two or more lines

In the example above the browser displays the first line formatted according to the "first-line" pseudo element. Where the browser breaks the line depends on the size of the browser window.
Note: The "first-line" pseudo-element can only be used with block-level elements.
Note: The following properties apply to the "first-line" pseudo-element:
  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear
Pseudo-elements can also be combined with CSS classes:

p.article:first-line {color: #FF0000}
<p class="article">A paragraph in an article</p>

The example above will set the first line of all paragraphs with class="article" to red.
Goto CSS3 and CSS2 complete reference

CSS :first-line pseudo-element Reviewed by 1000sourcecodes on 09:45 Rating: 5
Powered by Blogger.