ใช้ pseudo-element นี้เพื่อเพิ่มสไตล์พิเศษให้กับบรรทัดแรกของข้อความใน selector ตัวอย่างต่อไปนี้สาธิตวิธีใช้ pseudo-element :first-line เพื่อเพิ่มเอฟเฟกต์พิเศษให้กับบรรทัดแรกของอีเลเมนต์ในเอกสาร
ตัวอย่าง
<html> <head> <style> p:first-line { text-decoration: underline; } p.noline:first-line { text-decoration: none; } </style> </head> <body> <p class="noline"> บรรทัดนี้จะไม่มีเส้นใต้เพราะเป็นของคลาส noline</p> <p>บรรทัดแรกของย่อหน้านี้จะมีเส้นใต้ตามที่กำหนดในกฎ CSS ด้านบน บรรทัดที่เหลือในย่อหน้านี้จะยังคงปกติ ตัวอย่างนี้แสดงวิธีใช้ pseudo-element :first-line เพื่อให้เอฟเฟกต์กับบรรทัดแรกของอีเลเมนต์ HTML ใดๆ</p> </body> </html>