风云阁资源网

深入理解::before/:before和::after/:after的使用
网页制作 2024/12/27 佚名
3 1

第一部分：基础知识

1.与:active 和 :hover这些伪类不一样，他们都是伪元素。

2.:before/:after伪元素是在css2中提出来的。而::before/::after是在css3中的写法，这样从新提出是为了用两个冒号表示伪元素以区分伪类。

3.它们用在css里某个选择器之后，为了增添装饰性内容的，因为这样可以实现语义化，如果用html来添加一些没有实际内容的节点或者辅助式样本的文本，他们是毫无意义的。

4.它们有特有的属性content，其中添加的内容默认是内联元素。

5.创建的伪元素默认是在所依附的元素之上的，我们可以使用z-index:-1;把它放到下面去。

6.它们是虚拟节点，而不是真正的节点。如：

        div::after{
            content: " ";
            border:thin solid red;
        }

我们在浏览器可以看到：

深入理解::before/:before和::after/:after的使用

::after并不是一个真实节点，实际上我们在一些网站上经常可以看到它们的使用。

6.input，img，iframe等元素都不能包含其他元素，所以不能通过伪元素插入内容。　　

第二部分：应用

1.做间隔符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        a{
            color:blue;
            text-decoration: none;
        }
        .log:after{
            content:"|";
            color:red;
        }
    </style>
</head>
<body>
    <a href="" class="log">登录</a><a href="">注册</a>
</body>
</html>

效果如下：

深入理解::before/:before和::after/:after的使用

2.做三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        a{
            color:blue;
            text-decoration: none;
        }
        .log:before{
            content:" ";
            display: inline-block;
            width: 0;
            height: 0;
            border:10px solid transparent;
            border-left: 10px solid red;
        }
    </style>
</head>
<body>
    <a href="" class="log">登录</a>
</body>
</html>

效果如下所示：

深入理解::before/:before和::after/:after的使用

3.清除浮动(下面内容取自张鑫旭大神)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
    .box{padding:10px; background:gray;}
    .fix{*zoom:1;}
    .fix:after{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}
    .l{float:left;}
    </style>
</head>
<body>
    <div class="box fix">
    <img class="l" src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
</div>
</body>
</html>

效果如下：

深入理解::before/:before和::after/:after的使用

注意：其中*zoom:1;是用来在IE6中清除浮动的（用在浮动元素的父元素上）。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

风云阁资源网 Design By www.bgabc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
风云阁资源网 Design By www.bgabc.com
www.bgabc.com 风云阁资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
风云阁资源网 Design By www.bgabc.com