位置: 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编写一个简单的网页)

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

  • 两个支付宝账号可以合并吗(两个支付宝账号一个欠钱会从另外一个扣吗)

    两个支付宝账号可以合并吗(两个支付宝账号一个欠钱会从另外一个扣吗)

  • pcnm00是oppo哪个型号(oppopcnm00是什么型号手机)

    pcnm00是oppo哪个型号(oppopcnm00是什么型号手机)

  • 小米手机充电提示音怎么自定义(小米手机充电提示灯怎么设置)

    小米手机充电提示音怎么自定义(小米手机充电提示灯怎么设置)

  • 苹果照片最近删除在哪(苹果照片最近删除也删掉了怎么恢复)

    苹果照片最近删除在哪(苹果照片最近删除也删掉了怎么恢复)

  • 红米K20升级之后充电慢(红米k20pro更新后)

    红米K20升级之后充电慢(红米k20pro更新后)

  • 抖音怎么看不到送礼记录(抖音怎么看不到同城了呢)

    抖音怎么看不到送礼记录(抖音怎么看不到同城了呢)

  • 微信透明消息怎么发(微信透明消息怎么发送)

    微信透明消息怎么发(微信透明消息怎么发送)

  • 苹果xr面部解锁不能用了怎么回事(iphone xr怎么面部识别后直接解锁)

    苹果xr面部解锁不能用了怎么回事(iphone xr怎么面部识别后直接解锁)

  • 手机亮度自动调节怎么设置(手机亮度自动调节关闭了还会自动调节)

    手机亮度自动调节怎么设置(手机亮度自动调节关闭了还会自动调节)

  • 陌陌注销不了怎么办(陌陌注销不了?)

    陌陌注销不了怎么办(陌陌注销不了?)

  • 华为mate30pro截图不灵敏(华为mate30pro截图在哪里设置)

    华为mate30pro截图不灵敏(华为mate30pro截图在哪里设置)

  • iphone8plus的访问限制在哪(苹果8p访问权限)

    iphone8plus的访问限制在哪(苹果8p访问权限)

  • 戴尔i5与i7的区别(戴尔i7和i5有什么区别)

    戴尔i5与i7的区别(戴尔i7和i5有什么区别)

  • 为什么优酷会员在电视上不能用(为什么优酷会员不能开一个月)

    为什么优酷会员在电视上不能用(为什么优酷会员不能开一个月)

  • 天猫延迟发货被投诉对店铺会有影响吗(天猫延迟发货罚款多少)

    天猫延迟发货被投诉对店铺会有影响吗(天猫延迟发货罚款多少)

  • qq标签为什么会变(为什么qq标签会莫名其妙的变)

    qq标签为什么会变(为什么qq标签会莫名其妙的变)

  • 智学网账号在哪里查(智学网的账号)

    智学网账号在哪里查(智学网的账号)

  • 苹果x话筒怎么清洗(苹果x话筒有杂音怎么办)

    苹果x话筒怎么清洗(苹果x话筒有杂音怎么办)

  • 拼多多里的免拼卡在哪里(拼多多里的免拼机会收到货了以后需要付款吗)

    拼多多里的免拼卡在哪里(拼多多里的免拼机会收到货了以后需要付款吗)

  • 金税盘导出发票明细(金税盘导出发票明细怎么导)

    金税盘导出发票明细(金税盘导出发票明细怎么导)

  • 拍抖音怎么添加音乐(拍抖音怎么添加歌词)

    拍抖音怎么添加音乐(拍抖音怎么添加歌词)

  • 映泰主板bios设置图解教程(映泰主板bios设置硬盘启动)

    映泰主板bios设置图解教程(映泰主板bios设置硬盘启动)

  • 应付税费重分类如何做会计分录?
  • 普通增值税税率多少
  • 企业纳税证明是什么
  • 城镇土地使用税的征税范围有哪些
  • 抚恤金入账
  • 税收滞纳金计入营业外支出的哪一项
  • 折现率怎么确定 公式
  • 预缴土地增值税的会计处理
  • 水利建设基金的计税依据
  • 领用本企业生产的水泥用于在建工程
  • 资产负债表专项储备放哪个科目?
  • 实收资本未实缴到位,是否缴纳印花税
  • 公司买了商品做活动会计分录
  • 劳务外包用工单位可以抵扣进项税吗
  • 残疾人收到房租租赁发票收入还要缴纳个税吗
  • 租赁到期日 英语
  • 个人所得税申报错误如何更正申报
  • 企业爱心捐赠可以抵相应的税吗
  • 在建工程完工,并当日签订出租协议的会计分录
  • 个税缴纳累计是每年一算吗
  • 出租不动产什么时候交税
  • 防洪保安基金应用范围
  • 企业购入土地如何处理
  • 办公软件无形资产的确认条件有哪些
  • win10怎么清空
  • 电脑在线测速的软件
  • 购货方收到红字发票计入进项税转出还是进项税额负数?
  • php中字符串函数
  • 外贸企业出口退税计算
  • 微软的客户主要是什么
  • 怎样选好布艺沙发
  • 交暖气费可以开单位发票吗
  • 补提去年的所得税费用是怎么做分录?
  • php curl file_get_contents
  • 营业外收入不算收入吗
  • php网站安全防护
  • 关于商业承兑汇票的多选题有哪些
  • gpu版本的pytorch
  • 企业补助怎么做会计分录
  • python中numpy数组和列表的区别
  • 帝国cms8.0
  • 织梦自定义模型调用
  • 如何关闭mysqld
  • asp和asp net
  • 无偿受让股权是利好吗
  • 应收票据贴现的实收金额一定小于票据面值
  • 工程项目成本管理实论
  • 流动资产损失计入营业外支出吗
  • 收到退回的企业所得税分录
  • 小规模纳税人专票税率是多少
  • 企业零申报怎么办
  • 子公司提的盈余公积合并时如何抵消
  • 事业单位之间调动难吗
  • 留样产品的保存期限
  • 建筑业预交税金会计分录
  • 公司打款账号模板图片
  • 核定征收方式有哪些
  • 原始凭证基本要求是什么
  • 商业企业发出商品的核算方法
  • 预览pdf文件
  • 如何安装win2000
  • centos 远程管理
  • freebsd做服务器
  • linux那些事儿
  • linux telnet用法
  • Remind_XP.exe - Remind_XP是什么进程 有什么用
  • 天气应用程序(weather)app免费下载
  • linux使用vi编辑文件
  • cocos creator js ts
  • sqlite3 not found 解决方案
  • bat 命令大全
  • python科学绘图
  • pygame rect.move
  • 在linux的主要组成部分中最基础的是哪一项?
  • android基础入门教程
  • javascript七种数据类型
  • 怎么在晋江查找观看记录
  • 被标记为广告推销的电话能接吗
  • 广东地税局领导班子
  • 济宁市税务局官网名称
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设