The ::first-line Pseudo-element in CSS

CSSWeb DevelopmentFront End Technology

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>

Output

raja
Published on 06-Jan-2020 11:52:47
Advertisements