html里面的伪元素是什么？如何操作？

沐阳gg

已于 2022-11-24 10:34:31 修改

阅读量2k

点赞数 1

分类专栏： html从入门到入土文章标签： python 开发语言

于 2022-11-24 10:26:40 首次发布

本文链接：https://blog.csdn.net/qq_52545155/article/details/128013091

版权

html从入门到入土专栏收录该内容

36 篇文章 10 订阅

订阅专栏

前言

在html中，有些小标签不想用具体的标签去写，就会用到伪元素，那么伪元素是什么呢，该如何使用呢？

一、伪元素是什么？

伪元素相当于在一个盒子内部产生一个行内盒子

二、使用步骤

1.创建一个盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
            position: absolute;
        }



    </style>
</head>

<body>
    <div>
    </div>
</body>

</html>

2.效果如下

3、使用伪元素如何在该大盒子内部创建2个小盒子呢

在style里面添加2个样式：

        div::before{
            content: "";
            width: 50px;
            height: 50px;
            background-color: black;
            display: block;
            position: absolute;
            top: 5px;
            left: 20px;
        }
        div::after{
            content: "";
            width: 20px;
            height: 20px;
            background-color:aqua;
            position: relative;
            display: block;
            top: 5px;
            left: 5px;
        }

4、添加后的样式

可以清晰的看到大盒子内部多了2个小盒子，他们通过方向属性进行了偏移，这里用到了定位，定位不懂的伙伴可以参考上一篇博客html中的定位知识点如何使用_小魏快起床的博客-CSDN博客

这里主要就是教大学伪元素如何创建使用，相信大家已经有所理解了，这里再总结一下吧

5、before和after的区别

上面我创建了2个伪元素，一个是before，一个是after，这里对其进行一个解释

先上代码，我将定位去掉了，并且在div盒子里面添加了文字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>  
        div{
            width: 500px;
            height: 500px;
            background-color: pink;
            position: absolute;
        }

        div::before{
            content: "";
            width: 50px;
            height: 50px;
            background-color: black;
            display: block;

        }
        div::after{
            content: "";
            width: 20px;
            height: 20px;
            background-color:aqua;
            display: block;
        }

    </style>
</head>

<body>
    <div>
        内容
    </div>
</body>

</html>

效果如下：