位置: IT常识 - 正文

::before和::after是什么?(before跟after区别)

编辑:rootadmin
::before和::after是什么?

推荐整理分享::before和::after是什么?(before跟after区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:before和after怎么区分,before与after的区别它们的用法,before和after属于什么词,before和after怎么讲,before 与after,before与after的区别它们的用法,before与after的区别它们的用法,before与after的区别它们的用法,内容如对您有帮助,希望把文章链接给更多的朋友!

本文从最简单的开始,解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。

 

::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。

content属性

1)::before和::after下特有的content,用于在css渲染中向元素逻辑上的头部或尾部添加内容。

2)::before和::after必须配合content属性来使用,content用来定义插入的内容,content必须有值,至少是空

3)这些添加不会出现在DOM中,不会改变文档内容,不可复制,仅仅是在css渲染层加入。所以不要用:before或:after展示有实际意义的内容,尽量使用它们显示修饰性内容

content可取以下值:

string

使用引号包一段字符串,将会向元素内容中添加字符串

p::before{ content: "《"; color: #000000;}p::after{ content: "》"; color:#000000;}<p>JavaScript高级程序设计</p>attr()

通过attr()调用当前元素的属性,比如将图片alt提示文字或者链接的href地址显示出来。 

a::after { content: ' → ' attr(href); /* 在 href 前显示一个箭头 */} <a href="https://www.baidu.com/">百度地址</a>

a::after{ content: "【" attr(href) "】";}<a href="https://www.baidu.com/">百度地址</a>url()/uri()

用于引用媒体文件。比如:“百度”前面给出一张图片,后面给出href属性。 

a::before{ content: url("img/baidu_jgylogo3.gif");}a::after{ content:"("attr(href)")";}<a href="https://www.baidu.com/">百度地址</a>

注意

1)URL不能使用引号。如果你将URL用引号括起来,那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容,插入的而不是图像本身。

2)content属性,直接使用图片,即使写width,height也无法改变图片大小;

解决方案:如果要解决这个问题,可以把content:''写成空,使用background:url()来添加图片

/*伪元素添加图片:*/.wrap:after{ /*内容置为空*/ content:""; /*设置背景图,并拉伸*/ background:url("img/06.png") no-repeat center; /*必须设置此伪元素display*/ display:inline-block; /*必须设置此伪元素大小(不会被图片撑开)*/ background-size:100%; width:100px; height:100px;}

3)苹果端伪元素不生效,img、input和其他的单标签是没有:after和:before伪元素的(在部分浏览器中没有,如:苹果端会发现无效),因为单标签本身不能有子元素。

解决方案:给img包一个div可以解决

4)想要动态改变伪元素的图片,可以给当前元素添加伪元素图片的基础样式,再动态class来写伪元素的图片。

::before和::after的应用配合quotes 属性使用

 加括号

h1{ quotes:"(" ")"; /*利用元素的quotes属性指定文字符号*/}h1::before{ content:open-quote;}h1::after{ content:close-quote;}<h1>给标题加括号</h1>::before和::after是什么?(before跟after区别)

加引号

h2{ quotes:"\"" "\""; /*添加双引号要转义*/}h2::before{ content:open-quote;}h2::after{ content:close-quote;}<h2>给标题加引号</h2>

不指定,默认

h3::before{ content:open-quote;}h3::after{ content:close-quote;}<h3>不设置quotes</h3>装饰标题

h1 { display: grid; grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr); align-items: center; text-align: center; gap: 40px;}h1::before, h1::after { content: ''; border-top: 6px double;}<h1>标题</h1>

布局是通过将<h1>元素变成 3 列来实现的。左列和右列是双线,宽度均为minmax(50px, 1fr),这意味着它们的匹配宽度始终不小于50px。标题文本整齐地居中居中。

彩带标题

h1 { position: relative; margin: 0 auto 20px; padding: 10px 40px; text-align: center; background-color: #875e46;}h1::before, h1::after { content: ''; width: 80px; height: 100%; background-color: #724b34; /* 定位彩带两端形状的位置,并且放在最底层 */ position: absolute; z-index: -1; top: 20px; /* 彩带两端的形状 */ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%); /* 绘制并定位彩带的阴影三角形 */ background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%); background-size: 20px 20px; background-repeat: no-repeat; background-position: bottom right;}h1::before { left: -60px;}h1::after { right: -60px; transform: scaleX(-1); /* 水平翻转 */}--------------------------- <h1>标题</h1>实现更逼真的阴影

.box{margin:10px;width:300px;height:100px;border-radius:10px;background:#ccc}.shadow{position:relative;max-width:270px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 20px rgba(0,0,0,.1) inset}.shadow::after,.shadow::before{position:absolute;z-index:-1;content:""}.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;content:""}.shadow::after,.shadow::before{position:absolute;bottom:15px;left:10px;z-index:-1;width:50%;height:20%;box-shadow:0 15px 10px rgba(0,0,0,.7);content:"";transform:rotate(-3deg)}.shadow::after{right:10px;left:auto;transform:rotate(3deg)}<div class="box shadow"></div>替换内容

有些情况下content可以不使用::before或::after。如果content设置为单个图像,那么你可以直接在元素上使用它来替换该元素的 HTML 内容。

如页面上分别有以下三个内容:

加了replace类之后

.replace { content: url(img/replace.png);}

1)具有简单文本的元素。它会被取代。 2)一个包含<img>在其中的元素。它也会被取代。 3)<img>直接一个元素。Firefox不会取代它,但其他浏览器会。

清除浮动

方式一:

.classic-clearfix::after { content: ''; display: block; clear: both;}

方式二:

.modern-clearfix { display: flow-root;}

模拟float:center的效果

float没有center这个取值,但是可以通过伪类来模拟实现。

原理:左右通过::before float各自留出一半图片的位置,再把图片绝对定位上去。

body { font: 14px/1.8 Georgia, serif;}#page-wrap { width: 60%; margin: 40px auto; position: relative; }#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }#l, #r { width: 49%; }#l { float: left; }#r { float: right; }#l:before, #r:before { content: ""; width: 125px; height: 250px; }#l:before { float: right; }#r:before { float: left; }<div id="page-wrap"> <img src="img/cat.jpg" id="logo"> <div id="l"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> </div> <div id="r"> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus </p> </div></div>

引用参考:

W3C官方文档

Diving into the ::before and ::after Pseudo-Elements

Faking ‘float: center’ with Pseudo Elements

小可爱看完就点个赞再走吧!🤞🤞🤞

本文链接地址:https://www.jiuchutong.com/zhishi/299618.html 转载请保留说明!

上一篇:一个简单的网页设计HTML5作业(如何用html编写一个简单的网页)

下一篇:富文本编辑器介绍(富文本编辑器使用)

  • 转让不动产账务处理
  • 小规模纳税人免税账务处理
  • 所得税视同销售行为有哪些
  • 应收账款贷方余额重分类到哪
  • 招待用烟的会计处理
  • 个人所得税已申报税额合计是什么意思
  • 产品质量问题怎么处罚
  • 企业债务重组损失的所得税前扣除
  • 国有资产无偿划转管理办法
  • 部门独立核算管理制度
  • 退税后钱到哪里
  • 发工资时计提个人所得税
  • 少交了增值税怎么补
  • 付款方付款的发票税金能入账吗?
  • 收不回工程款的心情
  • 记账凭证做完之后干什么
  • 公司增值税发票怎么开
  • 电梯销售和安装怎么核算收入
  • 收到政府的专项资金
  • 非正常损失为什么不赔偿
  • 收到借出款利息会计分录
  • 安装win7教程
  • php tars
  • 宏基笔记本一键恢复系统
  • 水利工程水费怎样计算
  • php对象赋值给变量
  • 织梦地图插件
  • 集团公司内部结构是什么
  • PHP:JDToGregorian()的用法_日历函数
  • 个人账户存储额是缴费总和
  • 常见的归中反应有哪些
  • php实现购物车功能
  • php 并发 解决方案
  • 【小沐学C++】C++ MFC中嵌入web网页控件(WebBrowser、WebView2、CEF3)
  • vue cannot set property
  • 英雄联盟轮转模式2020时间表
  • 数据挖掘 实战
  • 怎样网上抄税
  • 海关缴款书稽核比对
  • 固定资产报废如何记账
  • 利息收入的会计科目怎么做
  • 材料采购成本是什么科目
  • dedecms上传视频
  • 非房地产企业的基建管理办法
  • 研发类公司能不能生产
  • 固定资产清理怎么做账务处理
  • 正解之途
  • asp 数据库
  • 超市的小票能入账吗
  • 财务费用的内容包括哪些
  • 租赁中承租人的会计分录
  • 银行结息需要开发票吗
  • 进口货物只有报关单能入账吗
  • 会计要知道的常识
  • 没有销售收入可以有销售费用吗
  • centos6.5安装教程中文
  • mysql查询语句大全及用法
  • WUSB54GS.exe - WUSB54GS是什么进程
  • 苹果mac系统复制粘贴不了
  • 阿里云电脑系统
  • ubuntu 8.04.1 LTS 下的cpu温度监控软件lm-sensors
  • linux无法登陆
  • windows7关机点了没反应
  • Win7打印机安装
  • linux检查是否存在vxlan模块
  • w8系统输入法怎么弄出来
  • 万能win8pe工具箱怎么用
  • glrotatef函数
  • dos命令可以做什么
  • javascript刷新页面的几种方法
  • linux查看shell脚本内容
  • flask框架图
  • js闭包的用处
  • 经营所得个人所得税税率表
  • 美国进口税起征点
  • 税务一证通进入哪个网站
  • 江苏预包装食品备案网上流程
  • 资源税税率表一览表
  • 印花税票在哪里可以查到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设