CSS :first-line Pseudo-element - จัดสไตล์บรรทัดแรกของข้อความ

ใช้ 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 ด้านบน ส่วนบรรทัดที่เหลือจะปกติ ตัวอย่างนี้แสดงการใช้ :first-line pseudo-element เพื่อให้เอฟเฟกต์กับบรรทัดแรกขององค์ประกอบ HTML ใดๆ</p>
  </body>
</html>