前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >CSS 中的 ::before 和 ::after 伪元素

CSS 中的 ::before 和 ::after 伪元素

作者头像
用户1088318
发布于 2025-05-21 03:06:13
发布于 2025-05-21 03:06:13
32600
代码可运行
举报
运行总次数:0
代码可运行

一、CSS 伪元素 CSS伪元素是指,在CSS 中使用一些特殊的选择器,创建出来的虚拟元素, 并不是实际存在的HTML元素;

用来选择和操作文档中的特定部分,实现一些特殊效果; 伪元素使得在不增加额外HTML标签的情况下,对文档中的内容进行样式化; 伪元素也是一种元素,可以设置html中支持的各种属性,包括元素的布局、定位、宽高、背景等等; 本文主要介绍::before 、::after 这个两个伪元素的相关内容和一些使用场景;

二、::before ::after 介绍 ::before ::after 伪元素用来给元素前面或者后面插入指定内容;

使用content属性来指定要插入的内容; 必须配合content属性一起使用,content的属性值可以为空; 伪元素的display属性值默认为inline; 1、::before ::before选择器用来向指定元素之前插入内容;

(1)语法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
元素::before{
content: "要插入的内容";
/* 其他属性 */
}

(2)示例

给页面所有的p元素前面插入内容;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
p::before{
content: "使用::before伪元素插入的内容——";
/* 其他属性 */
}
</style>
<body>
<div>
<p>第一个P标签中的内容</p>
<p>第二个P标签中的内容</p>
<p>第三个P标签中的内容</p>
</div>
</body>

2、::after ::after选择器用来向指定元素之后插入内容;

(1)语法

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
元素::after{
content: "要插入的内容";
/* 其他属性 */
}

(2)示例

给页面所有的p元素后面插入内容;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
p::after{
content: "——使用::after伪元素插入的内容";
/* 其他属性 */
}
</style>
<body>
<div>
<p>第一个P标签中的内容</p>
<p>第二个P标签中的内容</p>
<p>第三个P标签中的内容</p>
</div>
</body>

3、content 常用属性值 ::before ::after 必须配合content属性一起使用,以下是content的常用属性值: 

(1)设置文本内容

设置content的属性值为string类型,即可给伪元素添加文本;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
span::before{
content: "使用::before添加的文本前缀——————";
}
span::after{
content: "————使用::after添加的文本后缀";
}
</style>
......
<body>
<span class="box">我是HTML元素中的文本</span>
</body>

(2)设置媒体链接

通过url()属性值,即可导入媒体文件为伪元素的内容;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.container {
margin: 100px;
}
.avatar::after{
content: url("D:\\test\\girl.png");
display: block;
}
</style>
......
<body>
<div class="container">
<div class="avatar">示例图片</div>
</div>
</body>

注意,这里使用url添加的图片不能设置大小,最好通过背景添加图片;

(3)设置前 || 后引号

通过open-quote或close-quote属性值,即可给设置伪元素的内容为前引号或后引号;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
p:nth-child(1)::before{
content:open-quote;
/* 其他属性 */
}
p:nth-child(2)::after{
content:close-quote;
}
</style>
......
<body>
<div>
<p>添加前引号</p>
<p>添加后引号</p>
</div>
</body>

(4)获取元素属性

通过attr()获取元素的某一个属性值(以字符串的形式返回),并设置为伪元素的内容;

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
a:after {
content: " (" attr(href) ")";
}
</style>
......
<body>
<div><a href="https://www.csdn.net">CSDN</a>点击跳转至CSDN...</div>
<div><a href="https://www.baidu.com">百度</a>点击跳转至百度...</div>
</body>

(5)设置计数器

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
div {
counter-increment: index;
}
div:before {
content:counter(index);
}
</style>
......
<body>
<div>、、、、、、我是第1个div、、、、、、</div>
<div>、、、、、、我是第2个div、、、、、、</div>
<div>、、、、、、我是第3个div、、、、、、</div>
<div>、、、、、、我是第4个div、、、、、、</div>
</body>

三、::before ::after 应用场景 虽然 ::before ::after 这两个伪元素的使用方式非常简单,但若能灵活应用,就能实现一些很不错的CSS效果;

1、设置统一字符

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
p::before{
content: "* ";
color: red;
font-size: 24px;
/* 其他属性 */
}
p::after{
content: ":____________";
/* 其他属性 */
}
</style>
...
<body>
<div>
<p>姓名</p>
<p>年龄</p>
<p>出生日期</p>
<p>居住地址</p>
</div>
</body>

2、通过背景添加图片

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.container{
margin: 100px;
}
.container::after{
content: "";
display:block;
width: 260px;
height: 260px;
background-image: url("D:\\test\\girl.png");
background-position: center;
background-size: cover;
}
</style>
......
<body>
<div class="container">通过背景添加图片</div>
</body>

3、添加装饰线

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.line{
display: flex;
align-items: center;
margin: 60px;
height: 40px;
font-size: 18px;
}
.line::before, .line::after{
content: "";
width: 300px;
border-top: 6px double;
margin: 5px;
}

</style>
......
<body>
<div class="line">添加装饰线</div>
</body>

4、右侧展开箭头

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.container{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

width: 400px;
margin: 100px auto;
padding: 30px 0;
border-radius: 8px;
box-shadow: 0 0 4px 1px #acacac;
}

.setting-item{
position: relative;
align-items: center;
display: flex;
width: 300px;
height: 40px;
margin-bottom: 20px;
border-bottom: 1px solid #ccc;
}

.setting-item::after{
position: absolute;
right: 0;
content: "";
width: 8px;
height: 8px;
border-top: 1px solid #666;
border-right: 1px solid #666;
transform: rotate(45deg);
}

</style>
......
<body>
<div class="container">
<div class="setting-item">账号设置</div>
<div class="setting-item">权限管理</div>
<div class="setting-item">相关服务</div>
<div class="setting-item">帮助与反馈</div>
<div class="setting-item">......</div>
</div>
</body>

5、对话框小三角

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.container {
width: 400px;
margin: 100px auto;
padding: 30px 0;
border-radius: 8px;
box-shadow: 0 0 4px 1px yellowgreen;
}

.left-box,.right-box {
display: flex;
}

.right-box {
justify-content: end;
}

span {
position: relative;
display: flex;
align-items: center;

background-color: yellowgreen;
border-radius: 6px;
margin: 4px 14px;
padding: 16px;
}

.left-box span::before, .right-box span::after{
position: absolute;
content: "";
width: 12px;
height: 12px;
background-color: yellowgreen;
transform: rotate(45deg);
}

.left-box span::before{
left: -6px;
}
.right-box span::after {
right: -6px;
}
</style>

......

<body>
<div class="container">
<div class="left-box">
<span>Nice to meet you!</span>
</div>
<div class="right-box">
<span>Nice to meet you, too!</span>
</div>
</div>
</body>

6、插入icon图标

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style>
.login-box{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

width: 400px;
height: 400px;
margin: 100px auto;
border-radius: 8px;
box-shadow: 0 0 4px 1px #acacac;
}
.title{
font-size: 24px;
font-weight: 700;
margin-bottom: 40px;
}
.account, .pwd, .login-btn, .forgot-pwd{
width: 300px;
height: 40px;
line-height: 40px;
}

.account, .pwd{
display: flex;
align-items: center;
border-bottom: 1px solid #ccc;
font-size: 14px;
color: #888;
}
.pwd{
margin-top: 20px;
}
.account::before, .pwd::before{
content: '';
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
margin-right: 8px;
}
.account::before{
background-image: url("D:\\test\\user.svg");
}
.pwd::before {
background-image: url("D:\\test\\pwd.svg");
}

.login-btn{
text-align: center;
color: #fff;
font-size: 16px;
font-weight: 700;
background: #2687F0;
border-radius: 5px;
margin-top: 40px;
}

.forgot-pwd{
text-align: right;
font-size: 14px;
color: #888;
margin-top: 20px;
}
</style>
......
<body>
<div class="login-box">
<div class="title">XXX 管理系统</div>
<div class="account">请输入账号</div>
<div class="pwd">请输入密码</div>
<div class="login-btn">登 录</div>
<div class="forgot-pwd">忘记密码</div>
</div>
</body>

来源:https://blog.csdn.net/m0_65029152/article/details/140346358

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2025-05-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
“忘掉大数据”之“建模术”:数据挖掘还原用户的生活场景
建模无疑是大数据里面最艺术的部分,也是最令大数据从业者痴迷、得意的领域,一个好的模型就是一篇作品,是一首诗,令人心旷神怡。建模、模型并不是什么新鲜事物,它们早已出现在很多场合,譬如"产品模型"、"推荐模型"、"营销模型"、"挖掘模型”等等。但,它们有什么不同? 建模的幻影有千万种,有些人做过,有些人没做过,我们该如何看待?建模是不是需具备很多专业知识,非专业人士无法掌握?小白杨的所思所想,都在下面的文字。 一、建模并不神秘:让数据产生新的数据 一些建模的观点已在前面的道与法两篇体现,
智能算法
2018/04/03
6730
“忘掉大数据”之“建模术”:数据挖掘还原用户的生活场景
大数据告诉你,咖啡店开在哪里?
以电信行业为例,某电信运营商每天的语音业务量超过10亿分钟,短信业务约17亿条,移动数据流量业务超过230万GB;阿里数据平台事业部的服务器上,也有超过100PB已处理过的数据,等于104857600GB,相当于4万个西雅图中央图书馆,580亿本藏书。在过去这是人类很难想象的。
IT阅读排行榜
2018/08/13
4730
大数据告诉你,咖啡店开在哪里?
【案例】大数据攻略案例分析及结论
我们将迎来一个“大数据时代”。与变化相始终的中国企业,距离这场 革命还有多远?而追上领先者又需要多快的步伐? 研究结论 怎样才能用起来大数据?障碍如何解决?中国企业家研究院对10多家在大数据应用方面的
小莹莹
2018/04/19
1.5K0
【案例】大数据攻略案例分析及结论
大数据精准营销:如何找对人做对事?
如今,朋友圈广告已经“稀松平常”,而用户接收到什么样的商品广告,则基本取决于平日里对微信的使用习惯。无独有偶,淘宝、京东等电商平台在网页中弹出的定向品类广告,也是基于用户对于某一商品的搜索行为。
数据猿
2019/11/20
7410
大数据精准营销:如何找对人做对事?
专访车慧总裁刘琦:大数据时代的汽车营销才刚刚开始
专访车慧总裁刘琦:大数据时代的汽车营销才刚刚开始
数据猿
2018/04/25
6890
专访车慧总裁刘琦:大数据时代的汽车营销才刚刚开始
《纸牌屋》的大数据力量:巫术一般的精准营销
一部《纸牌屋》,让全世界的文化产业界都意识到了大数据的力量。《纸牌屋》的出品方兼播放平台Netflix在一季度新增超300万流媒体用户,第一季财报公布后股价狂飙26%,达到每股217美元,较去年8月的低谷价格累计涨幅超三倍。这一切,都源于《纸牌屋》的诞生是从3000万付费用户的数据中总结收视习惯,并根据对用户喜好的精准分析进行创作。 《纸牌屋》的数据库包含了3000万用户的收视选择、400万条评论、300万次主题搜索。最终,拍什么、谁来拍、谁来演、怎么播,都由数千万观众的客观喜好统计决定。从受众洞察、受众定
小莹莹
2018/04/18
1.8K0
本地外卖平台如何利用LBS大数据进行用户画像精准营销
大数据火不火想必大家心中有数,尤其在LBS定位功能的前提下,能够快速找到附近的商圈,吃喝玩乐可以说是样样不缺了。接下来我们先来认识一下LBS定位功能。
金优外卖
2019/11/15
2.9K0
本地外卖平台如何利用LBS大数据进行用户画像精准营销
【聚焦】大数据时代,谁“暴露”了女性消费者
  女性的特质是精致婉约,所谓“心较比干多一窍,病如西子胜三分”;而如果是位女汉子,那就更是人间极品了,在豪爽大气之下,还隐隐透露着比众多须眉更加细腻的心思。   女性消费者继承这种善解人意但又令人不可捉摸的高度进化的人类特质,所以在厂商的顾客名单里,她们属于必须额外付出努力、进行特殊照顾的族群。她们难以被理解,但是却又期待被人理解。这样欲迎还拒的态度,带给营销人员莫大的挑战。   在消费行为研究里有个相当重要的领域叫做“性别研究”,本质上其实就是“女性研究”,这个议题甚至被排入世界顶级“消费者研究进展
小莹莹
2018/04/23
5180
【聚焦】大数据时代,谁“暴露”了女性消费者
【大咖说】英特尔首席工程师:大数据是上帝智能
本文作者:吴甘沙 全文3214字,建议阅读时间:5分钟 上期回顾:【大咖说】吴军:数据为王和机器智能的时代 一、大数据之道 我认为把一件事情讲清楚,就要从这五个方面阐述:势、道、法、术、器。我今天主要从道、法、术三方面阐述大数据。 2010年,谷歌每两天产生的数据量相当于人类文明曙光到2013年数以万计的时间长河所产生的数据总和,数据产生了指数级增长,我们可以看下指数曲线当中有一个有趣的特征:一开始的进展是非常缓慢的,但是突然到了一个转折点后,就以爆炸式的方式发展,下一步的进步可以是前面所有步的总和
钱塘数据
2018/03/02
8480
【大咖说】英特尔首席工程师:大数据是上帝智能
关于“大数据”的五大误解
美国《外交政策》杂志网站5月9日刊登微软研究院首席研究员、麻省理工学院公民媒体中心客座教授凯特·克劳福德的一篇文章,文章说,“大数据”是当前的时髦术语,是技术界用来解决世界上最难处理的问题的全能办法。 文章说,这个术语一般用来描述对海量信息进行分析,从而发现规律、收集有价值的见解和预言复杂问题答案的技巧与科学。它也许听起来有些乏味,但是从制止恐怖分子,到消除贫困,到拯救地球,对于大数据的鼓吹者来说,没有什么问题是解决不了的。 维克托·梅耶—舍恩伯格和肯尼思·丘
安恒信息
2018/04/09
7100
[译]喜力如何用大数据与消费者互动
欢迎熟悉外语(含各种“小语种”)的朋友,加入大数据文摘翻译志愿者团队,回复“翻译”和“志愿者”了解详情。 大数据文摘翻译作品 作者:Mark Van Rijmenan 翻译:龙吟 校对:孙强 欢迎个人转发朋友圈;其他机构或自媒体转载,务必后台留言,申请授权 物联网连接万物,可谁又能想到最近网络挂上了啤酒瓶子?这又是玩哪出?原来,是喜力在瓶子上装了体感控制器,从此这玻璃瓶就能闻音起舞。我们说这招有创意,够酷!但这不是这个点子的全部。这个传感器除了制造光音互动外,它还能收集数据。这一招, 使得喜力一箭双雕。通过
大数据文摘
2018/05/21
6690
揭秘大数据:洞察客户行为,发掘营销真机
在今天这个数据横飞的时代,了解客户行为变得比以往任何时候都重要。企业为了抓住消费者的心,早已不仅仅靠直觉和经验,而是通过数据的深度挖掘,准确掌握客户需求和偏好。今天,笔者Echo_Wish就跟大家聊聊大数据如何改变客户行为分析,带来精准营销的革命性变革。
Echo_Wish
2025/04/03
1270
揭秘大数据:洞察客户行为,发掘营销真机
释放大数据的力量:解锁精准投放的市场营销奥秘
在当今数字化时代,数据被视为企业最宝贵的资产之一。而在市场营销领域,如何巧妙地运用大数据进行精准投放成为了许多企业成功与否的关键。那么,大数据如何在市场营销中发挥作用,助力企业实现精准投放呢?本文将深入探讨这个问题,揭示其中的奥秘。
Echo_Wish
2025/03/04
1850
释放大数据的力量:解锁精准投放的市场营销奥秘
奥巴马大选团队创建的大数据公司获A轮融资,阿里妈妈发布全域营销方案 | 大数据24小时
数据猿导读 阿里妈妈发布全域营销方案,将集团视角从电商向大数据转移;大数据平台艺恩发布“艺恩指数”,深挖泛娱乐领域数据价值;奥巴马大选团队创立的大数据公司Civis Analytics 获得A轮融资…
数据猿
2018/04/20
6710
奥巴马大选团队创建的大数据公司获A轮融资,阿里妈妈发布全域营销方案 | 大数据24小时
沈浩:通过大数据感知社会
以下内容,根据中国传媒大学新闻学院教授沈浩在第十一届亚洲传媒论坛发言整理。 在今天我们看到对于广电行业来讲,其实无论广播电视还是其他媒体,是一个融合和聚合的时代。人们通过移动、互联网等等方式,人们在看电视的时候,人们看到电视已经有了操作系统,或许人们在看电视的时候,通过按一下手机就能看到各种电视节目,看到电视了,当然也有人在看电视的时候其实他经常是在看电视上网,也可能主要是上网,看到网上人们提到什么事情又去电视上去看两眼。在这样一个融合聚合的时代。 今天的大数据仅仅露出冰山一角   什么是
大数据文摘
2018/05/18
7050
「消费者数据中台」精准营销的跃迁
过去10年中,云计算、大数据和人工智能技术的发展,不断颠覆既往的运营和商业模式,海量个性化的消费需求,也在重塑产业链中供应链关系。烟草作为传统行业,为国家经济发展,增加财政税收贡献极大。但正是因为烟草行业的垄断性和国有特征,导致烟草行业与大数据、互联网等新技术的融合要慢半拍。随着烟草市场化导向改革的逐步深入,营销模式由以工业、商业为主体服务零售终端向以工业、商业、零售终端为主体服务消费者转变,如何利用强调大数据分析的精准营销方法来围绕消费者分布构建商品结构和分销结构,是接下来需要去面对的课题。
黄成甲
2022/03/15
8900
「消费者数据中台」精准营销的跃迁
为何说大数据精准广告并不靠谱?
一、大数据精准广告内涵 大数据目前已经成为整个IT界(包含Internet Technology 以及Information Technology)最热的词汇之一,似乎任何一个话题,只要提到大数据,瞬
灯塔大数据
2018/04/10
8510
为何说大数据精准广告并不靠谱?
【观点】时趣在社会化大数据营销的经验
很多企业在过去三年的社会化营销实践中,都积累了很多的粉丝,有的企业有上百万的粉丝,每天和他们发生着大量的营销互动,然而,这些数据对企业的营销有帮助么?企业真的把这些社交数据的价值,实现了出来么? 2014年9月16日,在中国数字创新峰会(Topdigtial2014)上,时趣CEO张锐和与会嘉宾一起分享了名为“数字营销进入大数据驱动的IT时代”的演讲,通过分享时趣对大数据营销观点和案例让大家了解社会化大数据营销可以给企业营销带来哪些改变? 营销部门是企业IT最薄弱的环节 IT(Information Tec
小莹莹
2018/04/20
1.1K0
【观点】时趣在社会化大数据营销的经验
如何利用大数据进行预测性营销,看完这8个深度解答你就懂了
1、什么是精准营销,预测营销? 说到精准营销,不得不先提个性化的用户画像,我们针对每一类数据实体,进一步分解可落地的数据维度,刻画他/她的每一个特征,在聚集起来形成人群画像。比如下面就是两种典型年轻消
BestSDK
2018/02/28
8.5K0
如何利用大数据进行预测性营销,看完这8个深度解答你就懂了
企业如何利用大数据做运营
企业运营对于企业来说是非常重要的,因为良好的运营体系会让企业在市场宣传中轻松应对各种情况。当我们迈入数据时代的时候,企业在运营上相对应的也发生了改变,从最初的粗放式运营逐渐过渡到精细化运营。 一、企业为何要做精细化运营 随着互联网、媒体、用户、市场的变化,企业发现过去他们所做的粗狂式运营已经不能有效的提升效率和增加企业用户了,所以,一些企业开始找寻新的运营方式,比如逐渐转变为CPM(每千人成本)化的精细化经营,通过这样的运营来提升运营的效率,使企业广告投放效率尽可能的最大化。 对企业而言,打造精细化运营的
灯塔大数据
2018/04/04
1.6K0
企业如何利用大数据做运营
推荐阅读
相关推荐
“忘掉大数据”之“建模术”:数据挖掘还原用户的生活场景
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档