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

最新推荐文章于 2025-04-10 15:31:14 发布

原创最新推荐文章于 2025-04-10 15:31:14 发布 · 427 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS伪元素::before和::after实现图标显示、导航跟随线效果及清除浮动，探讨了行内元素特性和content属性的应用。

特性

都作为标签内部的最后一个/第一个子元素
行内元素
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;}即可