CSS :befor :after 伪元素的恰当用法

日期:2021-03-17 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

本篇关键详细介绍CSS中的:befor、:after建立的伪元素几种应用情景,如填充文字、做为iconfont、进度线、時间线和几何图形图型。

1. 详细介绍

1.1 表明

CSS中的:befor、:after都会建立1个伪元素,在其中:befor建立的伪元素是所选元素的第1个子元素,:after建立的伪元素是所选元素的最终1个子元素。

:befor、:after建立的伪元素默认设置款式为内联款式。

1.2 英语的语法

/* CSS3 */
selector::before
/* CSS2 */
selector:before

CSS3引进了 ::(两个冒号)是用来区别伪类(:1个冒号)和伪元素(::两个冒号)。

伪类:实际操作元素自身,如 :hover、:first-child、:focus这些。

伪元素:实际操作元素的子元素,如 ::before、::after、::content这些。

在IE8中只适用:(1个冒号),因此以便适配这些访问器还可以应用 :befor、:after。

1.3 content特性

content 特性表明伪元素填充的內容。

示例

CSS:

.test-div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    background-color: #eee;
}
.test-div::before {
    content: "♥";
    color: red;
}
.test-div::after {
    content: "♥";
    color: blue;
}

HTML网页页面:

实际效果:

1.4 可更换元素

可更换元素(replaced element):其呈现由不得CSS来操纵的。这些元素是1类外型3D渲染单独于CSS的目标。

典型的可更换元素有<iframe>、<img>、 <object>、 <video> 和 表模块素,如<textarea>、 <input> 。

一些元素只在1些独特状况下主要表现为可更换元素,比如 <audio> 和 <canvas> 。

:befor :after 在此类元素内是不起效的。

 1.5 访问器适用状况

IE9版本号才刚开始彻底适用 :befor :after ,Chrome、Firefox现都已全线适用。

IE Edge Firefox Chrome Android 
Chrome iOS 
Safari
9 all 2 all all  all

2. 运用情景

2.1 适用文字标识符

表明:content特性适用文字标识符。

示例:

2.2 适用iconfont

表明:content特性也适用iconfont字体样式图表的展现。这也是应用数最多的情景。

示例:此示例已引入了阿里巴巴iconfont标志库

2.3 进度线与時间线

表明::befor :after建立的伪元素能够以线条方法精准定位在元素附近的特定部位上,如进度线和時间线。

1) 进度线

2) 時间线

2.4 几何图形图型

表明:根据设定 :befor :after 伪元素的border有关特性,可建立十分多的几何图形图型;如3角形、多边形、5角星这些。

1) 矩形框

表明:默认设置状况下,:befor :after 伪元素的border边框特性与别的HTML元素1样。

CSS:

div::before {
    width: 0px;
    height: 0px;
    content: '';
    position: absolute;
    border-top: 50px solid #f50000;
    border-right: 50px solid #6cc361;
    border-bottom: 50px solid #6167c3;
    border-left: 50px solid #fa00d9;
}

实际效果:

2) 3角形

表明:显示信息某1方向的border,并掩藏上下2边的border(情况设定为全透明),可以让伪元素显示信息3角形的样子。

示例:

总结

以上所述是网编给大伙儿详细介绍的CSS :befor :after 伪元素的恰当用法,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!