打赏

css before和after伪元素应用

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>

效果：

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

 

posted @ 2017-08-16 09:58  孟繁贵  阅读(567)  评论(0)  编辑  收藏  举报
TOP