::first-line 伪元素用于设置块级元素首行文本样式,支持 color、font-weight、font-size 等文本属性,常用于段落首行美化,如加粗、变色、放大等效果。

在CSS中,::first-line 伪元素用于选中块级元素中的第一行文本,并为其设置独立的样式。这个选择器常用于美化段落的首行,比如在文章排版中实现首行缩进、字体加粗或颜色变化等视觉效果。
基本语法
p::first-line { property: value; }该伪元素只能应用于**块级元素**(如 div、p、h1-h6 等),不能用于内联元素(如 span)。
可设置的常见样式属性
::first-line 支持部分CSS文本样式属性,包括:
- color:改变首行文字颜色
- font-weight:设置是否加粗
- font-style:设置斜体
- text-transform:控制大小写转换
- text-decoration:添加下划线、删除线等
- letter-spacing:调整字符间距
- text-shadow:添加文字阴影
- font-size:修改字号
注意:不能使用所有CSS属性,例如 margin、padding、background-image 虽然部分背景相关属性可用,但行为可能受限制。
立即学习“前端免费学习笔记(深入)”;
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效,网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果,让这个网站的风格瞬间显得非常的高大上,让你的企业品牌在访客心中留下更深的影响。当然,我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型,所以这一点儿作者也有考虑到,已经尽可能的对js和css脚本进行精简和优化,尽可能的加快网站加载速度,同时也
实际应用示例
p::first-line { color: #d63384; font-weight: bold; font-size: 1.2em; text-transform: uppercase; }上面代码会让每个 p 段落的首行文字变成粉色、加粗、放大并转为大写,适用于强调文章开头。
注意事项
首行的范围由当前布局和字体大小决定,会随浏览器窗口尺寸变化而变化。例如,当用户调整浏览器宽度导致换行位置改变时,::first-line 匹配的文本内容也会动态变化。
另外,::first-line 是CSS2引入的伪元素,建议使用双冒号写法以区别于伪类(如 :hover)。虽然单冒号 :first-line 在旧版本中也有效,但推荐使用现代标准写法。









