css伪元素详解

2023年6月20日发(作者：)

css伪元素详解css的伪元素，之所以被称为伪元素，是因为他们不是真正的页⾯元素，html没有对应的元素，但是其所有⽤法和表现⾏为与真正的页⾯元素⼀样，可以对其使⽤诸如页⾯元素⼀样的css样式，表⾯上看上去貌似是页⾯的某些元素来展现，实际上是css样式展现的⾏为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出⽆法伪元素的结构⽆法审查。css有⼀系列的伪元素，如:before，:after，:first-line，:first-letter等，本⽂就详述⼀下:before和:after元素的使⽤⼀、伪元素:before和:after⽤法这个两个伪元素在真正页⾯元素内部之前和之后添加新内容（当然了，可以对伪元素应⽤定位可以置于任何位置）。可以⽤以下例⼦来说明：

wonyun!

上⾯例⼦从技术⾓度看，等价于下⾯的html结构：

hello wonyun! you are handsome!

由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表⽰伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作⽤。那么问题来了，content属性的值可以有哪些内容呢，具体有以下⼏种情况：字符串，字符串作为伪元素的内容添加到主元素中注意：字符串中若有html字符串，添加到主元素后不会进⾏html转义，也不会转化为真正的html内容显⽰，⽽是会原样输出attr(attr_name), 伪元素的内容跟主元素的某个属性值进⾏关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图⽚加载失败⽤⼀段⽂字替换。url()/uri(), 引⽤外部资源，例如图⽚；counter(), 调⽤计数器，可以不使⽤列表元素实现序号问题。⼆、:before和:after特点上⾯说了，伪元素是通过样式来达到元素效果的，也就是说伪元素不占⽤dom元素节点，引⽤⾥⾯总结的，:before和:after伪元素的主要特点如下：伪元素不属于⽂档，所以js⽆法操作它伪元素属于主元素的⼀部分，因此点击伪元素触发的是主元素的click事件原⽂说块级元素才能有:before, :after，其实是不妥的，⼤部分⾏级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺⼨有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作⽤的。基于伪元素的特点可以知道其优缺点，也引⽤别⼈⽂章的话：* 优点 * 减少dom节点数 * 让css帮助解决部分js问题，让问题变得简单*缺点 * 不利于SEO * ⽆法审查元素，不利于调试三、:before和:after常见使⽤场景1. 清除浮动清除浮动是前端最常见的问题，有⼀种做法是使⽤⼀个空的页⾯元素如div来清除浮动，但是这种做法增加毫⽆语义的页⾯元素，⽽且占⽤dom节点。更可取的做法是利⽤伪元素来清除浮动： 这样，class=l-form-row的元素内部任何浮动都能清除掉，不⽤额外添加⽆意义的元素。2. 利⽤attr()来实现某些动态功能在页⾯中常见这种问题，页⾯上加载的图⽚在⽆法加载时会显⽰⼀个破损图⽚，直接影响页⾯的美观；那么可以通过伪元素配合样式能够让未加载的图⽚看起来真的像破裂的效果，如下图所⽰：是⼀个替换元素，其外观和尺⼨是由外部资源来决定的，当外部图⽚资源加载失败时其会显⽰破裂图⽚和alt⽂字，尺⼨仅由其⾃⾝内容决定。这时元素可以使⽤伪元素:before和:after，因为其元素内容没有被替换；利⽤attr()来获取图⽚alt属性值作为伪元素:after的content内容来替换img的内容，并运⽤适当的样式从⽽完成：图⽚加载成功时显⽰正常的图⽚，加载失败时显⽰图⽚破裂效果的样式，具体代码参考： img{ min-height: 50px; position: relative; } img:before: { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; backgound-color: rgb(230, 230,230); border: 2px dotted rgb(200,200,200); border-radius: 5px; } img: { content: 'f127" " Broken Image of " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100,100,100) position: absolute; top: 5px; left: 0; width: 100%; text-align: center; }3. 与counter()结合实现序号问题，⽽不⽤使⽤列表元素。具体还要结合css的 counter-increment 和 counter-reset 属性的⽤法 。代码如下：

结果如下：4. 特效使⽤利⽤这两个伪元素，可以实现各种效果，如放⼤镜、叉叉、箭头、三⾓符等，也可轻易实现如下效果代码实现如下： a { position: relative; display: inline-block; outline: none; text-decoration: none; color: #000; font-size: 32px; padding: 5px 10px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "5B"; left: -20px; } a:hover::after { content: "5D"; right: -20px; }代码实现如下： table{overflow: hidden;} td, th{ padding: 10px; position: relative; outline: 0; } td:hover::after, th:hover::after {

content: '';

background-color: lightblue; position: absolute;

left: 0; height: 10000px; top: -5000px; width: 100%; z-index: -1; } td:hover::before { background-color: lightblue; content: '';

height: 100%; top: 0; left: -5000px; position: absolute;

width: 10000px; z-index: -1; }具体代码： .empty__bg { display: inline-block; width: 95px; height: 92px; background: url(/FvD_sYY4Fmp_yKS0E07H-5jhuKTB) no-repeat; background-size: 95px 92px; position: relative; margin-bottom: 16px;/*注意这⾥需要留好位置放置after元素（它是absolute进去的）*/ } .empty__bg:after { content: "暂⽆学习计划"; display: block; font-size: 14px; line-height: 24px; text-align: center; width: 100%; color: #909090; position: absolute; top: 100%; left: 0; } }上述可以实现扩⼤可点击区域，这对应⼿机⽤户来说更加友好⼀些，否则⽤户点击不会触发相应的事件；具体代码实现如下： .play-cover {position: relative} .play-cover:before{ content: ""; display: block; position: absolute; width: 0; height: 0; border-left: 8px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 9px; margin-bottom: 7px; z-index: 5; } .play-cover:after{ content: ''; display: block; position: absolute; width: 20px; height: 20px; border: 2px solid white; background: rgba(0, 0, 0, .6); border-radius: 12px; background-clip: padding-box; } .magic-checkbox { position: absolute; display: none; //先隐藏真正的checkboxbox } .magic-checkbox + label {//为与checkbox搭配的label使⽤样式 position: relative; //相对定位，⽅便其内容的伪元素进⾏定位 display: block; //块元素 padding-left: 30px; cursor: pointer; vertical-align: middle;

} .magic-checkbox + label:before { //label添加:before伪元素，⽤于⽣成⼀个带边界的正⽅形，模拟复选框的轮廓 position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border: 1px solid #c0c0c0;

border-radius: 3px;

} //为checkbox添加:after伪元素，作⽤是⽣成⼀个√图形，模拟checkbox选中状态，未选中状态下会被隐藏 .magic-checkbox + label:after { top: 2px; left: 7px; box-sizing: border-box; width: 6px; //实现√图形很简单：设置⼀个长⽅形，去掉其上边界和左边界，剩下的2个边界旋转45度就得到√形状 height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; position: absolute; display: none; //√形状先隐藏 content: ''; } //单击label，隐藏的checkbox为checked状态，这时设置checked状态下搭配label的:before伪元素背景和边界颜⾊ .magic-checkbox:checked + label:before { animation-name: none;

border: #3e97eb; background: #3e97eb;

} //checked状态的checkbox搭配的label伪元素:after此时设置显⽰，那么√就显⽰出来了 .magic-checkbox:checked + label:after { display: block;

}利⽤:before和:after能轻易实现美化的radio和checkbox

2023年6月20日发(作者：)

css伪元素详解css的伪元素，之所以被称为伪元素，是因为他们不是真正的页⾯元素，html没有对应的元素，但是其所有⽤法和表现⾏为与真正的页⾯元素⼀样，可以对其使⽤诸如页⾯元素⼀样的css样式，表⾯上看上去貌似是页⾯的某些元素来展现，实际上是css样式展现的⾏为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出⽆法伪元素的结构⽆法审查。css有⼀系列的伪元素，如:before，:after，:first-line，:first-letter等，本⽂就详述⼀下:before和:after元素的使⽤⼀、伪元素:before和:after⽤法这个两个伪元素在真正页⾯元素内部之前和之后添加新内容（当然了，可以对伪元素应⽤定位可以置于任何位置）。可以⽤以下例⼦来说明：

wonyun!

上⾯例⼦从技术⾓度看，等价于下⾯的html结构：

hello wonyun! you are handsome!

由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表⽰伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作⽤。那么问题来了，content属性的值可以有哪些内容呢，具体有以下⼏种情况：字符串，字符串作为伪元素的内容添加到主元素中注意：字符串中若有html字符串，添加到主元素后不会进⾏html转义，也不会转化为真正的html内容显⽰，⽽是会原样输出attr(attr_name), 伪元素的内容跟主元素的某个属性值进⾏关联，及其内容为主元素的某指定属性的值好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图⽚加载失败⽤⼀段⽂字替换。url()/uri(), 引⽤外部资源，例如图⽚；counter(), 调⽤计数器，可以不使⽤列表元素实现序号问题。⼆、:before和:after特点上⾯说了，伪元素是通过样式来达到元素效果的，也就是说伪元素不占⽤dom元素节点，引⽤⾥⾯总结的，:before和:after伪元素的主要特点如下：伪元素不属于⽂档，所以js⽆法操作它伪元素属于主元素的⼀部分，因此点击伪元素触发的是主元素的click事件原⽂说块级元素才能有:before, :after，其实是不妥的，⼤部分⾏级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺⼨有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作⽤的。基于伪元素的特点可以知道其优缺点，也引⽤别⼈⽂章的话：* 优点 * 减少dom节点数 * 让css帮助解决部分js问题，让问题变得简单*缺点 * 不利于SEO * ⽆法审查元素，不利于调试三、:before和:after常见使⽤场景1. 清除浮动清除浮动是前端最常见的问题，有⼀种做法是使⽤⼀个空的页⾯元素如div来清除浮动，但是这种做法增加毫⽆语义的页⾯元素，⽽且占⽤dom节点。更可取的做法是利⽤伪元素来清除浮动： 这样，class=l-form-row的元素内部任何浮动都能清除掉，不⽤额外添加⽆意义的元素。2. 利⽤attr()来实现某些动态功能在页⾯中常见这种问题，页⾯上加载的图⽚在⽆法加载时会显⽰⼀个破损图⽚，直接影响页⾯的美观；那么可以通过伪元素配合样式能够让未加载的图⽚看起来真的像破裂的效果，如下图所⽰：是⼀个替换元素，其外观和尺⼨是由外部资源来决定的，当外部图⽚资源加载失败时其会显⽰破裂图⽚和alt⽂字，尺⼨仅由其⾃⾝内容决定。这时元素可以使⽤伪元素:before和:after，因为其元素内容没有被替换；利⽤attr()来获取图⽚alt属性值作为伪元素:after的content内容来替换img的内容，并运⽤适当的样式从⽽完成：图⽚加载成功时显⽰正常的图⽚，加载失败时显⽰图⽚破裂效果的样式，具体代码参考： img{ min-height: 50px; position: relative; } img:before: { content: " "; display: block; position: absolute; top: -10px; left: 0; height: calc(100% + 10px); width: 100%; backgound-color: rgb(230, 230,230); border: 2px dotted rgb(200,200,200); border-radius: 5px; } img: { content: 'f127" " Broken Image of " attr(alt); display: block; font-size: 16px; font-style: normal; font-family: FontAwesome; color: rgb(100,100,100) position: absolute; top: 5px; left: 0; width: 100%; text-align: center; }3. 与counter()结合实现序号问题，⽽不⽤使⽤列表元素。具体还要结合css的 counter-increment 和 counter-reset 属性的⽤法 。代码如下：

结果如下：4. 特效使⽤利⽤这两个伪元素，可以实现各种效果，如放⼤镜、叉叉、箭头、三⾓符等，也可轻易实现如下效果代码实现如下： a { position: relative; display: inline-block; outline: none; text-decoration: none; color: #000; font-size: 32px; padding: 5px 10px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "5B"; left: -20px; } a:hover::after { content: "5D"; right: -20px; }代码实现如下： table{overflow: hidden;} td, th{ padding: 10px; position: relative; outline: 0; } td:hover::after, th:hover::after {

content: '';

background-color: lightblue; position: absolute;

left: 0; height: 10000px; top: -5000px; width: 100%; z-index: -1; } td:hover::before { background-color: lightblue; content: '';

height: 100%; top: 0; left: -5000px; position: absolute;

width: 10000px; z-index: -1; }具体代码： .empty__bg { display: inline-block; width: 95px; height: 92px; background: url(/FvD_sYY4Fmp_yKS0E07H-5jhuKTB) no-repeat; background-size: 95px 92px; position: relative; margin-bottom: 16px;/*注意这⾥需要留好位置放置after元素（它是absolute进去的）*/ } .empty__bg:after { content: "暂⽆学习计划"; display: block; font-size: 14px; line-height: 24px; text-align: center; width: 100%; color: #909090; position: absolute; top: 100%; left: 0; } }上述可以实现扩⼤可点击区域，这对应⼿机⽤户来说更加友好⼀些，否则⽤户点击不会触发相应的事件；具体代码实现如下： .play-cover {position: relative} .play-cover:before{ content: ""; display: block; position: absolute; width: 0; height: 0; border-left: 8px solid white; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 9px; margin-bottom: 7px; z-index: 5; } .play-cover:after{ content: ''; display: block; position: absolute; width: 20px; height: 20px; border: 2px solid white; background: rgba(0, 0, 0, .6); border-radius: 12px; background-clip: padding-box; } .magic-checkbox { position: absolute; display: none; //先隐藏真正的checkboxbox } .magic-checkbox + label {//为与checkbox搭配的label使⽤样式 position: relative; //相对定位，⽅便其内容的伪元素进⾏定位 display: block; //块元素 padding-left: 30px; cursor: pointer; vertical-align: middle;

} .magic-checkbox + label:before { //label添加:before伪元素，⽤于⽣成⼀个带边界的正⽅形，模拟复选框的轮廓 position: absolute; top: 0; left: 0; display: inline-block; width: 20px; height: 20px; content: ''; border: 1px solid #c0c0c0;

border-radius: 3px;

} //为checkbox添加:after伪元素，作⽤是⽣成⼀个√图形，模拟checkbox选中状态，未选中状态下会被隐藏 .magic-checkbox + label:after { top: 2px; left: 7px; box-sizing: border-box; width: 6px; //实现√图形很简单：设置⼀个长⽅形，去掉其上边界和左边界，剩下的2个边界旋转45度就得到√形状 height: 12px; transform: rotate(45deg); border-width: 2px; border-style: solid; border-color: #fff; border-top: 0; border-left: 0; position: absolute; display: none; //√形状先隐藏 content: ''; } //单击label，隐藏的checkbox为checked状态，这时设置checked状态下搭配label的:before伪元素背景和边界颜⾊ .magic-checkbox:checked + label:before { animation-name: none;

border: #3e97eb; background: #3e97eb;

} //checked状态的checkbox搭配的label伪元素:after此时设置显⽰，那么√就显⽰出来了 .magic-checkbox:checked + label:after { display: block;

}利⽤:before和:after能轻易实现美化的radio和checkbox