伪元素中::after和::before的运用

最新推荐文章于 2022-11-25 21:03:38 发布

Ray997

最新推荐文章于 2022-11-25 21:03:38 发布

阅读量316

点赞数

分类专栏： CSS 文章标签： css html

本文链接：https://blog.csdn.net/Ray997/article/details/107386122

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

特性

都作为标签内部的最后一个/第一个子元素
行内元素
content属性必填(没有直接’’)

使用场景

文字前边的图标

<style>
        span::before {
            display: inline-block;
            content: '';
            background: url(home.png) no-repeat;
            width: 50px;
            height: 50px;
            background-size: cover;
            vertical-align: bottom;
            }
</style>
<body>
    <span>这是一个图片</span>
</body>

效果图

导航的跟随线

<style>
       ul {
           list-style: none;
       }

       li {
           float: left;
           width: 120px;
           height: 20px;
           text-align: center;
       }

       li::after {
           margin: 0 auto;
           display: block;
           content: '';
           width: 50px;
           height: 2px;
           background-color: tomato;

       }
   </style>
</head>

<body>
   <div>
       <ul>
           <li>我是一个列表项</li>
           <li>我也是一个</li>
       </ul>
   </div>
</body>

在这里插入图片描述

-清除浮动的影响

<style>
        ul {
            background-color: teal;
        }

        li {
            width: 200px;
            height: 100px;
            background-color: tomato;
            float: left;
        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

在这里插入图片描述

在ul后加上一个子元素来清除浮动影响

ul::after {
            content: '';
            display: block;
            clear: both;
        }

在这里插入图片描述
ps:左边和上边的是padding与margin的自带距离,使用全局*{margin:0;padding:0;}即可

Ray997

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪元素中::after和::before的运用

特性都作为标签内部的最后一个/第一个子元素行内元素content属性必填(没有直接’’)使用场景文字前边的图标<style> span::before { display: inline-block; content: ''; background: url(home.png) no-repeat; width: 50px; height:
复制链接

扫一扫