CSS伪类:before在元素以前 :after 在元素以后案例解

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

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

本实例教程简易的详细介绍1下有关CSS伪类:before, :after详解,有必须掌握的盆友能够参照1下下。
:before 伪元素在元素以前加上內容
这个伪元素容许创作人员在元素內容的最前面插进转化成內容。默认设置地,这个伪元素是行内元素,但是可使用特性 display 更改这1点。

:after 伪元素在元素以后加上內容
这个伪元素容许创作人员在元素內容的最终面插进转化成內容。默认设置地,这个伪元素是行内元素,但是可使用特性 display 更改这1点。


拷贝编码
编码以下:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>伪类导个航..</title>
<style type="text/css">
/*css一部分, 注意在其中border, margin, left, right的赋值*/
body{background:#EEE;margin:0px;padding:0px;font-size:14px;font-family:Microsoft Yahei;color:#FFF;}
#nav_demo{overflow:hidden;width:520px;margin:100px auto 0px;}
#nav_demo span{float:left;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;}
.shenzhen{background:#4FA三dA;}
.guangzhou{background:#666912;}
.shanghai{background:#9B44BC;}
.beijing{background:#9B2222;}
.chengdu{background:#804B12;}
.shenzhen:hover{background:#387399;}
.guangzhou:hover{background:#4B4D0E;}
.shanghai:hover{background:#692A81;}
.beijing:hover{background:#711A1A;}
.chengdu:hover{background:#59390E;}
.shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{
border-style:solid;
border-width:15px 10px;
content:"";
height:0;
position:absolute;
top:0;
width:0;
}
.shenzhen:before{border-color:#4FA三dA #4FA三dA transparent transparent;left:⑵0px;}
.guangzhou:before{border-color:#666912 #666912 transparent transparent;left:⑵0px;}
.shenzhen:after{border-color:transparent transparent #4FA三dA #4FA三dA;right:⑵0px;}
.guangzhou:after{border-color:transparent transparent #666912 #666912;right:⑵0px;}
.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:⑵0px;}
.guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:⑵0px;}
.shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:⑵0px;}
.guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:⑵0px;}
#tips{float:right;margin-right:200px;margin-top:20px;color:#8BA612;width:280px;background:#333;border:solid 1px #000;padding:5px 10px;}
#header{position:absolute;top:0px;width:100%;height:30px;line-height:30px;background:#333;border-bottom:solid 1px #000;}
#header span{padding-left:30px;padding-right:10px;}
#header a{text-decoration:none;color:#8BA612;}
#header a:hover{text-decoration:underline;}
#footer{position:absolute;bottom:0px;width:100%;text-align:center;height:30px;line-height:30px;background:#333;border-top:solid 1px #000;}
#footer a{color:#8BA612;text-decoration:none;padding-left:5px;}
#footer a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div id="header"><span>回到</span><a href=https://www.jb51.net>《回家锄草..CSS伪类:before, :after》</a></div>
<div id="nav_demo">
<span class="shenzhen">8.29 深圳市</span>
<span class="guangzhou">9.10 广州市</span>
<span class="shanghai">10.15 上海市</span>
<span class="beijing">11.12 北京</span>
<span class="chengdu">12.10 成都</span>
</div>
<div id="tips">Tips: 你用IE6 IE7, 那就活该你看不见实际效果...</div>
<div id="footer"></div>
</body>
</html>

上面积案例,下面大家来1下详细介绍1下

拷贝编码
编码以下:

<!--仅有第1第2个加了实际效果(深圳市.广州市)-->
<div id="nav_demo">
<span class="shenzhen">8.29 深圳市</span>
<span class="guangzhou">9.10 广州市</span>
<span class="shanghai">10.15 上海市</span>
<span class="beijing">11.12 北京</span>
<span class="chengdu">12.10 成都</span>
</div>

css部分

拷贝编码
编码以下:

/*css一部分, 注意在其中border, margin, left, right的赋值*/
#nav_demo{margin-top:20px;margin-left:20px;font-size:12px;font-family:Microsoft Yahei;overflow:hidden;}
#nav_demo span{float:left;color:#FFF;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;}
.shenzhen{background:#4FA三dA;}
.guangzhou{background:#666912;}
.shanghai{background:#9B44BC;}
.beijing{background:#9B2222;}
.chengdu{background:#804B12;}
.shenzhen:hover{background:#387399;}
.guangzhou:hover{background:#4B4D0E;}
.shanghai:hover{background:#692A81;}
.beijing:hover{background:#711A1A;}
.chengdu:hover{background:#59390E;}
.shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{
border-style:solid;
border-width:15px 10px;
content:"";
height:0;
position:absolute;
top:0;
width:0;
}
.shenzhen:before{border-color:#4FA三dA #4FA三dA transparent transparent;left:⑵0px;}
.guangzhou:before{border-color:#666912 #666912 transparent transparent;left:⑵0px;}
.shenzhen:after{border-color:transparent transparent #4FA三dA #4FA三dA;right:⑵0px;}
.guangzhou:after{border-color:transparent transparent #666912 #666912;right:⑵0px;}
/* 伪类能够像下边这样叠加应用...*/
.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:⑵0px;}
.guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:⑵0px;}
.shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:⑵0px;}
.guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:⑵0px;}

【第1个标准出現了 – :before, :after伪类能够在不提升html编码量得状况下, 为元素提升实际效果】
说到了在其中的伪类before,after. 正如其单词含意, 便是在功效的元素前, 或后完成一些实际效果. 可是在适配性上会有1些难题, IE8, IE8+, Chrome, Safari, Firefox.

【第2个标准 – border在宽高为0的元素上, 4个方位全是3角形】
很早以前看到过用纯css来完成1个折角的实际效果. 实际上也是用的css中border的特点.
各位能够自身检测下, 给1个宽高都为0的元素加1个很宽的border, 另外, 给border的4个方位各自设定不一样的色调值. 以后会发现, border的左右上下全是3角形(这里是在宽高为0的状况下, 检测用.其实不是说边框便是3角形..??~~). 也便是说, border4个方位的边框之间斜坡密不可分联接的.

【第3个标准 – border-color4个主要参数能够设定邻近两侧全透明, 此外两侧同色, 便可出現3角形】
以后, border-color的特性值中有1个transparent(全透明), 就像margin的界定1样, border-color有4个主要参数, 各自意味着上, 右, 下, 左的色调值. 这样要是将邻近两侧的色调设定为全透明, 此外两侧的色调设定为同样色调, 就会出現1个3角形.
在以后, 3角形的尺寸怎样操纵. 尽量注意宽高为0的元素, 其大宽度边框的模样. 左右边框的和是元素具体的高宽比, 上下边框的和是元素的具体宽度, 因此, 不必惯性逻辑思维, 把1个边的宽高作为是具体的宽高. 这样测算的結果就会令人较为不解了..
下边这个很不好看的demo是1个宽高为0的元素border
上边框: 80px #387399
右侧框: 60px #4B4D0E
下边框: 40px #692A81
左侧框: 20px #711A1A

【第4个标准 – 有效操纵高宽比, 宽度】
css编码最上边有句注解, 说是要注意那几个值(border, margin, left, right). 缘故在于, 必须让3角形跟內容一部分高宽比1致, 另外还不容易被周围的元素盖住. 这就要测算1下了.
掌握上边对border高宽比宽度的解释, 随后內容一部分提议特定高宽比, 而并不是用padding来撑开, 缘故在于, 文本一部分的高宽比因字体样式的不1致而有一定的不一样, 很难精准操纵高宽比. 自然, 假如诸位对字体样式科学研究的深入水平早已做到灭绝人性的水平, 那还可以试试..
before和after伪类的应用会占有1定的室内空间, 因此, 必须测算border的具体宽度, 随后将元素之间的间隔, 适度增大, 最少增大到border的宽度(防止被后面的元素盖住3角形地区, 自然, 也有别的方法防止这类难题. 这里只是1提).