การจัดรูปแบบตัวอักษรแรกด้วย CSS ::first-letter

CSS ช่วยให้เราจัดรูปแบบตัวอักษรแรกขององค์ประกอบได้โดยใช้ ::first-letter pseudo-element หมายเหตุ: เครื่องหมายวรรคตอน, digraphs และ content property อาจเปลี่ยนตัวอักษรแรกได้

ตัวอย่างที่ 1: การจัดรูปแบบตัวอักษรแรก

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  text-align: center; 
} 
::first-letter { 
  font-size: 3em; 
  color: sienna; 
  box-shadow: -10px 0 10px green; 
  background-color: gainsboro; 
} 
</style> 
</head> 
<body> 
<h2>Proin ut diam eros</h2> 
<p>Donec rutrum a erat vitae interdum. </p> 
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

ตัวอย่างที่ 2: การจัดรูปแบบขั้นสูง

<!DOCTYPE html> 
<html> 
<head> 
<style> 
body { 
  text-align: center; 
} 
body > * { 
  background-color: slategrey; 
} 
::first-letter { 
  font-size: 1.6em; 
  color: darkviolet; 
  background-color: silver; 
  text-shadow: -15px 8px palevioletred; 
} 
</style> 
</head> 
<body> 
<h2>Proin ut diam eros <p>Donec rutrum a erat vitae interdum. </p> 
<p>Integer eleifend lectus sit amet purus semper, ut pharetra metus gravida.</p> 
</body> 
</html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: