Neworld

伪元素
知识点1、在元素的前面添加内容2、清除浮动Demo代码<!DOCTYPE html> <html...
扫描右侧二维码阅读全文
13
2019/05

伪元素

知识点

1、在元素的前面添加内容
2、清除浮动

Demo

9679ecc33d1cb5bc92cdbf1322ee2411.png

03d8fcbca730ec12cbf2f48ae74382bb.png

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /* 在内容之后插入 content里面的值 */
            a::after{
                content: "搜索一下";
                color: red;
                
            }
            /* 在内容之前插入 content里面的内容 */
            a::before{
                content: "iMoe";
                color: orange;
            }
            
            /* 另一个作用 清除浮动 */
            .box{
                width: 300px;
            }
            
            .left{
                width: 100px;
                height: 100px;
                background-color: red;
                float: left;
            }
            
            .right{
                width: 200px;
                height: 100px;
                background-color: green;
                float: right;
            }
            
            
            .box2{
                width: 500px;
                height: 100px;
                background-color: black;
            }
            
            
            .clearfix:after{
                /* 内容为小数点 */
                content: ".";
                /* 转化为块级元素 */
                display: block;
                height: 0;
                /* 内容隐藏 */
                visibility: hidden;
                /* 清除浮动 */
                clear: both;
            }
            
        </style>
        
    </head>
    <body>
        <a href="baidi.com">百度</a>
        
        <!-- 清除浮动 -->
        <div class="box clearfix">
            <div class="left">Left</div>
            <div class="right">Right</div>
        </div>
        <div class="box2">box2</div>
        
    </body>
</html>

关于用div清除浮动的代码演示

文章名: 《伪元素》

本文链接:https://www.neworld.studio/771.html

除特别注明外,文章均由 Neworld 原创

 原创文章 转载时请注明 出处 以及文章链接
最后修改:2019 年 05 月 13 日 05 : 17 PM

发表评论