数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS ::first-line 撰写具有吸引力的第一行
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>输出
这将产生以下结果 −
更新时间： 2021 年 3 月 12 日
119 次浏览
广告