css before和after伪元素应用

2018-06-24 01:45:17来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、说明

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容之后插入新内容。

伪元素默认展示为inline

display: inline;

 

必须写content属性,不然伪类不起作用

 

2、兼容性

伪元素有2种写法,单冒号和双冒号,单冒号和双冒号作用是一样的

兼容性查看:http://caniuse.com/#search=%3Abefore

从上图看见:IE8浏览器只支持单冒号写法,不支持双冒号写法,因此建议before和after伪元素采用单冒号写法

3、应用

(1)清除浮动

 

.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

 

(2)添加美化图标

如清除ul li显示默认的小黑点,添加美化的符号

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>css 伪元素应用--添加美化图标</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
                font-size: 14px;
            }
            
            ul {
                margin: 100px;
                list-style: none;
            }
            
            li:before {
                display: inline-block;
                content: "";
                width: 4px;
                height: 4px;
                background: #0e337a;
                position: relative;
                left: 0;
                top: -3px;
                margin-right: 5px;
            }
        </style>
    </head>

    <body>
        <ul>
            <li>1、before伪元素使用</li>
            <li>2、after伪元素使用</li>
        </ul>
    </body>

</html>

效果:

说明:将伪元素设置为的块级元素,伪元素同样拥有盒模型的概念

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:不受控制的 position:fixed

下一篇:AngularJS小案例:日程表