【前端基础】10、CSS的伪元素（::first-line、::first-letter、::before、::after）【注：极简描述】

原创 已于 2025-05-17 08:43:43 修改 · 187 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #前端

于 2025-05-17 08:42:44 首次发布

一、伪元素的作用

选取某个特定的元素。

二、::first-line、::first-letter

::first-line：针对首行文本设置属性
::first-letter：针对首字母设置属性
在这里插入图片描述
在这里插入图片描述

三、::before、::after

在一个元素之前（::before）或者之后（::after）插入其他内容（可以是图片、文字）。
常常通过content属性为一个元素增加修饰性的内容。

代码：
在这里插入图片描述
在这里插入图片描述

结果：
在这里插入图片描述

【高频考点精讲】CSS伪类和伪元素完全指南：:hover、:before这些到底有什么区别？
全栈老李的博客
05-13 1332
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。大家好，我是全栈老李。今天咱们来聊聊CSS中那些让人又爱又恨的伪类和伪元素，很多同学用了好几年CSS，可能还是分不清:hover和:before到底有什么区别。别急，今天老李就带大家彻底搞明白这个知识点。
前端面经-CSS篇(三）---伪元素和伪类选择器
qq_44643806的博客
04-06 949
伪元素是 CSS 创建的“假元素”，它不是 HTML 中真实存在的标签，是一种由 CSS 创建出来的“虚拟元素节点”，它并不真实存在于 HTML 的 DOM 结构中，但浏览器在渲染时会像处理普通元素一样，把它插入进渲染树中。你可以用来添加一些装饰、内容、布局结构等。::before：用于在元素内容之前插入内容。::after：用于在元素内容之后插入内容。：用于选中文本内容的第一个字母。：用于选中文本内容的第一行。借助::before，我们可以实现很多“视觉增强效果”，无需在 HTML 中多加一层。
CSS伪元素选择器 ::first-line 深度解析 - doyoe/css-handbook 技术指南
最新发布
gitblog_00531的博客
06-29 247
CSS伪元素选择器 ::first-line 深度解析 - doyoe/css-handbook 技术指南 什么是 ::first-line 伪元素 ::first-line 是CSS中一个非常实用的伪元素选择器，它允许开发者对文本块的第一行内容应用特殊样式。这个选择器最早在CSS1规范中引入，后来在CSS3中更新了语法规范。 基本语法 E:first-line { /* 样式规则 */ } ...
零基础学习CSS(4)——::first-line、::first-letter、::before、::after、::selection
qq_43650934的博客
10-11 553
官方资料 鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/ 学习正文
CSS :first-line选择器
lengqingIT的博客
03-20 359
HTML 用法 <body> <h1>:first-line选择器用来指定选择器第一行的样式。</h1> <p>实例 每个 p 元素的第一行选择的样式 www.semi-warm.com......................................................................
CSS3伪元素::first-line、::first-letter、 ::Selection
波克比的前端CSDN博客
06-11 1129
p::first-line {font-weight:bold;}/*::first-line选择元素的第一行*/ p::first-letter {font-size: 56px; float:left; margin-right:10px;}/*::first-letter选择文本块的第一个字符,段落排版，首字下沉*/ p::selection{ background:red; color:#
网页缩放后元素位置_CSS 伪元素基础知识：first-line、first-letter、selection(三)
weixin_39967405的博客
12-04 432
除了::before 和::after，CSS 的伪元素还有::first-line、::first-letter 和::selection 这三个，这三个相对来说就简单得多，用法也较为纯粹。没看过前两篇文章的，笔者建议大家看看：CSS 伪元素基础知识：before 与after (一)、CSS 伪元素基础知识：content 与counter 实用技巧(二)::first-line::first...
CSS3 伪元素选择器，例如（E::before、E::after）
03-25
常见伪元素： E::first-letter, 表示给元素中的第一个字母设置一个样式 E::first-line, 表示给元素的第一行设置一个样式 E::before, 用于CSS渲染中向元素逻辑上的头部添加内容，主要是用它开显示修饰的内容，...
CSS伪元素深入解析：::before与::after的应用与优势
CSS伪元素和`content`属性为开发者提供了一种灵活且高效的方式来增强页面的视觉效果和用户体验，而无需增加HTML的复杂性。通过熟练掌握这些技巧，我们可以创建出更具表现力和交互性的网页设计。
css中伪类:after的用法(三种方式)
01-19
而且CSS里不光有伪类，还有伪元素，比如：:first-letter，:first-line，:before和:after。 本文中其它伪元素暂且不表，单说:after伪元素。 after顾名思义是在元素后面的意思，实质是在元素之后添加内容。 这个伪元素...
请说说css中的:first-line选择器的作用是什么？
王铁柱666的博客
12-14 395
是一个伪元素选择器，它用于选择并样式化某个元素的第一行文本。这个选择器特别适用于为段落或其他文本块的首行添加特殊的样式，比如改变字体大小、颜色或者添加装饰效果等。在这个例子中，段落的第一行文本将以红色、稍大的字体大小以及大写字母的形式显示。下面是一个简单的例子，展示了如何使用。
css 伪元素（before，after，first-letter，first-line）
Nikita_jg的博客
08-01 977
语法>> 标签样式/类样式：伪元素{ 属性：值  }(css3有::after的写法为了将伪类和伪元素区分开来) 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式。 1 :first-line 向文本的首行添加特殊样式。 1 :before 在元素之前添加内容。 2 :after 在元素之后添
深入CSS伪元素：::first-letter与::first-line的妙用
weixin_35094083的博客
05-08 415
本文深入探讨了CSS伪元素::first-letter和::first-line的使用技巧与限制。我们分析了::first-letter不适用于特定字符和元素的问题，以及::first-line如何影响段落的第一行。同时，我们讨论了::selection伪元素，它允许我们自定义用户选择文本时的样式。
css3.0 伪类选择器
huimoumou的博客
07-07 800
伪元素选择器 伪元素选择器是针对css中已有的伪元素起作用。css提供的伪元素选择器有以下4个。 first-letter：该选择器对应的css样式对指定对象内第一个字符起作用。 first-line：该选择器对应的css样式对指定对象内第一行字符起作用。 before:该选择器与内容相关的属性结合使用，用于在指定对象内部的前端插入内容。 after：该选择器与内容相关的属性结合使用，用于在指定...
CSS 伪元素和伪类
weixin_46048542的博客
08-23 321
CSS 伪元素用于设置元素指定部分的样式。 ::first-line伪元素用于向文本的首行添加特殊样式。 注意：::first-line 伪元素只能应用于块级元素。 以下属性适用于 ::first-line 伪元素： 字体属性 颜色属性 背景属性 word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear 请注意双冒号表示法 - ::first-line 对比 :first-line
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
秋刀鱼不做梦的编程日常
04-16 4061
CSS基础之伪元素选择器（如果想知道CSS的伪元素选择器知识点，那么只看这一篇就足够了！）
css选择符第三部分(基础用法)
qq_58242432的博客
11-25 607
css选择符第三部分(基础用法) 五，伪对象选择符
网页缩放后元素位置_关于 first-line、first-letter、selection 三个CSS伪元素的介绍
weixin_39828847的博客
11-30 431
除了::before 和::after，CSS 的伪元素还有::first-line、::first-letter 和::selection 这三个，这三个相对来说就简单得多，用法也较为纯粹。没看过前两篇文章的，笔者建议大家看看：CSS 伪元素基础知识：before 与after (一)、CSS 伪元素基础知识：content 与counter 实用技巧(二)::first-line::first...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值