::first-line - HTML CSS CSS Selector

HTML CSS examples for CSS Selector:first-line

  1. HOME
  2. HTML CSS
  3. CSS Selector
  4. first-line

Description

The ::first-line selector selects the first line of the specified element.

The ::first-line selector can only be used with block-level elements.

The following properties can be used with ::first-line:?

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

Example

Select and style the first line of every <p> element:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {<!--from w  w  w .j av a  2 s  . c om-->
    background-color: yellow;
}
</style>
</head>
<body>

<h1>header</h1>
<p>This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. 
   This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. 
   This is a test. .</p>


</body>
</html>

Related Tutorials