深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）-白红宇

深入理解 CSS 的 :before 和 :after 选择器（制作select下拉列表美化插件）

阅读量：5750 次

发布时间：2019-06-18

本文共 3161 字，大约阅读时间需要 10 分钟。

原文链接：http://www.cnblogs.com/LY-leo/p/5765598.html

对于 :before 和 :after 选择器，大家并不陌生，但是很少有人会主动去用它们。先解释下它们的定义和用法：

:before 选择器在被选元素的内容前面插入内容，:after 选择器在被选元素的内容后面插入内容，都会使用 content 属性来指定要插入的内容。

有时候，项目中或多或少需要一些箭头，如果用图片来做，感觉就有点 low 了，而上面这两个选择器是最好的选择。效果如下：

html 代码如下：

css 代码如下：

.test {    position: relative;    width: 120px;    height: 40px;    border: 1px solid #d2d2d2;    border-radius: 3px;}.test:after {    position: absolute;    right: 15px;    top: 18px;    width: 0;    height: 0;    content: "";    border-width: 6px 6px 0 6px;     /*border-width: 6px 6px 6px 6px;*/    border-style: solid;    border-color: #fff transparent;    /*red transparent transparent transparent;*/    -webkit-transition: all .25s;       -moz-transition: all .25s;        -ms-transition: all .25s;         -o-transition: all .25s;            transition: all .25s;}.test:before {    position: absolute;    right: 13px;    top: 18px;    width: 0;    height: 0;    content: "";    border-width: 8px 8px 0 8px;    border-style: solid;    border-color: #d36969 transparent;    -webkit-transition: transform .25s;       -moz-transition: transform .25s;        -ms-transition: transform .25s;         -o-transition: transform .25s;            transition: transform .25s;}.test.active:after{           top: 20px;    -webkit-transform: rotate(180deg);       -moz-transform: rotate(180deg);        -ms-transform: rotate(180deg);         -o-transform: rotate(180deg);            transform: rotate(180deg); }.test.active:before{    -webkit-transform: rotate(180deg);       -moz-transform: rotate(180deg);        -ms-transform: rotate(180deg);         -o-transform: rotate(180deg);            transform: rotate(180deg);        }

通过 :before 和 :after 两个伪元素，设置 content 为空，宽高为零，边框和颜色，生成两个等边三角形，一个是红色的三角，其边长稍大，一个是白色的三角。会有人问为什么白色三角是通过 :after 生成的，因为 :after 生成的白色三角才能覆盖在 :before 生成的红色三角，而形成一个箭头(一定要设置好定位的 top 值，使两个三角的底边重合)。

js 代码如下：

$('.test').on('click',function(){      $(this).toggleClass('active');})

点击的时候箭头会旋转180度，效果如下：

分析：

加z-index: 10前后：

aaaaaa

　　修改1：

.test:before {				position: absolute;				right: 13px;				top: 18px;				width: 0;				height: 0;				content: "";				border-width: 8px 8px 8px 8px;				border-style: solid;				border-color: green transparent transparent transparent;				transition: transform .25s;				/*z-index: 10;*/			}

　　修改后的样式：

.test:after {				position: absolute;				right: 15px;				top: 18px;				width: 0;				height: 0;				content: "";				border-width: 6px 6px 6px 6px;				border-style: solid;				border-color: white transparent transparent transparent;				transition: all .25s;			}						.test:before {				position: absolute;				right: 13px;				top: 18px;				width: 0;				height: 0;				content: "";				border-width: 8px 8px 8px 8px;				border-style: solid;				border-color: green transparent transparent transparent;				transition: transform .25s;				/*z-index: 10;*/			}

制作美化select 插件：

你可能感兴趣的文章