องค์ประกอบหลอก CSS นี้เลือกบรรทัดแรกของเนื้อหาขององค์ประกอบ อย่างไรก็ตาม ความยาวของบรรทัดอาจเปลี่ยนแปลงไปตามขนาดหน้าต่าง หากไม่กำหนดความกว้างของข้อความที่มีข้อความ
มาดูตัวอย่าง CSS ::first-line pseudo element −
ตัวอย่าง
<!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 ::first-line pseudo element −
ตัวอย่าง
<!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> ผลลัพธ์
