Pseudo-element ::first-letter ใน CSS

CSS Pseudo-element ::first-letter เลือกตัวอักษรแรกของเนื้อหาในองค์ประกอบ แต่ไม่ทำงาน หากองค์ประกอบเป็น inline-level

ตัวอย่างที่ 1: Drop Cap (ตัวอักษรแรกใหญ่)

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      background-color: #32485d; border: 5px solid black; color: #959799;
    }
    p::first-letter {
      font-size: 1.5em; color: #f9f9f9; padding: 2px;
    }
  </style>
</head>
<body>
  <div>
    <h2>Eclipse IDE</h2>
    <p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p>
  </div>
</body>
</html>

ผลลัพธ์

ตัวอย่างที่ 2: จัดสไตล์ตัวอักษรแรกของหลายพารากราฟ

<!DOCTYPE html>
<html>
<head>
  <style>
    p::first-letter {
      font-size: 1.5em; background-color: black;
      color: #dc3545; padding: 2px;
    }
  </style>
</head>
<body>
  <div>
    <h2>Machine Learning Tutorials</h2>
    <p>TensorFlow</p>
    <p>Machine Learning with Python</p>
    <p>Time Series</p>
    <p>PyTorch</p>
  </div>
</body>
</html>

ผลลัพธ์

คุณสมบัติที่ใช้กับ ::first-letter ได้

• Font properties: font-size, font-weight, font-family, color
• Background properties: background-color, background-image
• Margin, Padding, Border
• text-decoration, vertical-align, line-height, float

ข้อจำกัด

• ไม่ทำงานกับ display: inline หรือ inline-block (ต้องเป็น block-level)
• Punctuation (เครื่องหมายวรรคตอน) นำหน้าตัวอักษรแรก จะถูกรวมอยู่ใน ::first-letter ด้วย
• ไม่สามารถใช้กับ ::before content ได้

การประยุกต์: Drop Cap แบบคลาสสิก

p::first-letter {
  float: left;
  font-size: 3em;
  line-height: 1;
  padding: 0.1em 0.1em 0 0;
  color: #dc3545;
}