Định dạng chữ cái đầu với CSS ::first-letter

Giới thiệu

CSS giúp chúng ta định dạng chữ cái đầu tiên của một phần tử bằng pseudo-element ::first-letter. Lưu ý rằng dấu câu, digraphs và thuộc tính content có thể thay đổi chữ cái đầu tiên.

Ví dụ 1: Drop cap cơ bản

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Ví dụ 2: Kết hợp với background

<!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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: