深层次了解::before/:before和::after/:after的应用

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

第1一部分:基本专业知识

1.与:active 和 :hover这些伪类不1样,她们全是伪元素。

2.:before/:after伪元素是在css2中提出来的。而::before/::after是在css3中的写法,这样重新提出是以便用两个冒号表明伪元素以区别伪类。

3.它们用在css里某个挑选器以后,以便增加装饰设计性內容的,由于这样能够完成词义化,假如用html来加上1些沒有具体內容的连接点或輔助式样版的文字,她们是没什么实际意义的。

4.它们有独有的特性content,在其中加上的內容默认设置是内联元素。

5.建立的伪元素默认设置是在所依附于的元素之上的,大家可使用z-index:⑴;把它放到下面去。

6.它们是虚似连接点,而并不是真实的连接点。如:

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

大家在访问器能够看到:

::after其实不是1个真正连接点,具体上大家在1些网站上常常能够看到它们的应用。

6.input,img,iframe等元素都不可以包括别的元素,因此不可以根据伪元素插进內容。  

第2一部分:运用

1.做间距符。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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>

实际效果以下:

2.做3角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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>

实际效果以下所示:

3.消除波动(下面內容取自张鑫旭高手)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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>

实际效果以下:

留意:在其中*zoom:1;是用来在IE6中消除波动的(用在波动元素的父元素上)。

总结

以上便是这篇文章内容的所有內容了,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,假如有疑惑大伙儿能够留言沟通交流。