- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
The ::first-line Pseudo-element in CSS
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
<!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
<!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
Published on 06-Jan-2020 11:52:47
- Related Questions & Answers
- Usage of CSS :first-line pseudo-element
- CSS :first-letter pseudo-element
- The ::first-letter Pseudo-element in CSS
- The :first-child Pseudo-class in CSS
- CSS :after pseudo-element
- CSS :before pseudo-element
- Difference Between Pseudo-Class and Pseudo-Element in CSS
- What is Pseudo-element in CSS
- The ::before and ::after Pseudo-element in CSS
- Usage of :first-child pseudo-class in CSS
- Creating Attractive First Lines with CSS ::first-line
- Indent the first line of a paragraph in CSS
- The :lang Pseudo-class in CSS
- CSS Pseudo Elements
- The :last-child Pseudo-class in CSS
Advertisements