यह सीएसएस छद्म तत्व किसी तत्व की सामग्री की पहली पंक्ति का चयन करता है। हालाँकि, लाइन की लंबाई विंडो के आकार के अनुसार बदल सकती है यदि टेक्स्ट वाले टेक्स्ट की चौड़ाई निश्चित नहीं है।
आइए CSS का एक उदाहरण देखें ::प्रथम-पंक्ति छद्म तत्व -
उदाहरण
<!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> आउटपुट
प्रारंभ में जब विंडो की चौड़ाई का आकार '606px' हो -
जब विंडो की चौड़ाई बढ़ाई जाती है -
जब तत्व वाले टेक्स्ट की चौड़ाई तय की गई और विंडो का आकार बदला गया -
आइए CSS का एक और उदाहरण देखें ::प्रथम-पंक्ति छद्म तत्व -
उदाहरण
<!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> आउटपुट
