使用 CSS ::first-letter 设置首字母样式

cssweb developmentfront end technology更新于 2024/8/29 23:40:17

CSS 可以使用 ::first-letter 伪元素帮助我们设置元素首字母的样式。请注意，标点符号、二合字母和 content 属性可以改变首字母。

以下示例演示了 CSS ::first-letter 伪元素。

示例

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