The ::first-line Pseudo-element in CSS

CSS Web Development Front End Technology

CSS Online Training

Anadi Sharma

More Detail

Kickstart HTML, CSS and PHP: Build a Responsive Website

Featured

Ogbemudia Terry Osayawe

More Detail

XPath, CSS Selector, Web, DOM, SelectorsHub & TestCase Studio

Best Seller

Sanjay Kumar

More Detail

This CSS Pseudo Element selects the first line of the content of an element. However, the length of the line may change according to window size if width of containing text is not fixed.

Let’s see an example of CSS ::first-line pseudo element −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: lightgreen;
   color: white;
}
</style>
</head>
<body>
<h2>Lorem Ipsum</h2>
<p>Phasellus id ante turpis.Vestibulum luctus justo id odio iaculis condimentum. Vestibulum sapien mauris, feugiat id posuere vitae, condimentum blandit sapien.</p>
<div id="divDisplay"></div>
<script>
divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
window.addEventListener('resize', function() {
   divDisplay.textContent = 'Current window width: '+window.innerWidth+'px';
})
</script>
</body>
</html>

Output

Initially when window width size is ‘606px’ −

When window width is increased −

When width of text containing element was fixed and window resized −

Let’s see another example of CSS ::first-line pseudo element −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
   background-color: #FF8A00;
   color: white;
}
div{
   width: 420px;
}
</style>
</head>
<body>
<div>
<h2>Demo Heading</h2>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
<p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p>
</div>
</body>
</html>