css before和after伪元素应用

最新推荐文章于 2022-09-25 22:41:40 发布

weixin_30892889

最新推荐文章于 2022-09-25 22:41:40 发布

阅读量108

点赞数

原文链接：http://www.cnblogs.com/mengfangui/p/7371779.html

版权

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>

效果：

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

转载于:https://www.cnblogs.com/mengfangui/p/7371779.html

weixin_30892889

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css before和after伪元素应用

1、说明":before" 伪元素可以在元素的内容前面插入新内容。":after" 伪元素可以在元素的内容之后插入新内容。伪元素默认展示为inline，即display: inline;必须写content属性，不然伪类不起作用！2、兼容性伪元素有2种写法，单冒号和双冒号，单冒号和双冒号作用是一样的。兼容性查看：http://can...
复制链接

扫一扫