CSS สามารถช่วยเราจัดรูปแบบตัวอักษรตัวแรกขององค์ประกอบโดยใช้ ::first-letter pseudo-element โปรดทราบว่าเครื่องหมายวรรคตอน ไดกราฟ และคุณสมบัติเนื้อหาสามารถเปลี่ยนอักษรตัวแรกได้
ตัวอย่างต่อไปนี้แสดงให้เห็นถึง CSS ::first-letter pseudo-element.
ตัวอย่าง
<!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> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่าง
<!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> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
