使用 CSS ::first-line 创建美观的首行

cssweb developmentfront end technology更新于 2024/8/30 0:12:17

CSS ::first-line 伪元素帮助我们设置元素首行的样式

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

示例

<!DOCTYPE html>
<html>
<head>
<style>
body {
   text-align: center;
   background-color: darkorchid;
}
::first-line {
   font-size: 2em;
   color: black;
   font-weight: bold;
   text-shadow: 0 -10px grey;
}
</style>
</head>
<body>
<article>
<p>Donec rutrum a erat vitae interdum. </p>
<p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
</article>
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
article {
   text-align: center;
}
::first-line {
   box-shadow: inset 0 0 13px orchid;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum. </h2>
<p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex
vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec
semper ligula ac consequat scelerisque.</p>
<p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
</article>
</body>
</html>