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

    前言

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

    一、伪元素是什么？

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

    二、使用步骤

    1.创建一个盒子

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>  
    10.         div{
    11.             width: 500px;
    12.             height: 500px;
    13.             background-color: pink;
    14.             position: absolute;
    15.         }
    16.  
    17.  
    18.  
    19.     </style>
    20. </head>
    21.  
    22. <body>
    23.     <div>
    24.     </div>
    25. </body>
    26.  
    27. </html>

    2.效果如下

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

    在style里面添加2个样式：

    1.         div::before{
    2.             content: "";
    3.             width: 50px;
    4.             height: 50px;
    5.             background-color: black;
    6.             display: block;
    7.             position: absolute;
    8.             top: 5px;
    9.             left: 20px;
    10.         }
    11.         div::after{
    12.             content: "";
    13.             width: 20px;
    14.             height: 20px;
    15.             background-color:aqua;
    16.             position: relative;
    17.             display: block;
    18.             top: 5px;
    19.             left: 5px;
    20.         }

    4、添加后的样式

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

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

    5、before和after的区别

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

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>  
    10.         div{
    11.             width: 500px;
    12.             height: 500px;
    13.             background-color: pink;
    14.             position: absolute;
    15.         }
    16.  
    17.         div::before{
    18.             content: "";
    19.             width: 50px;
    20.             height: 50px;
    21.             background-color: black;
    22.             display: block;
    23.  
    24.         }
    25.         div::after{
    26.             content: "";
    27.             width: 20px;
    28.             height: 20px;
    29.             background-color:aqua;
    30.             display: block;
    31.         }
    32.  
    33.     style>
    34. head>
    35.  
    36. <body>
    37.     <div>
    38.         内容
    39.     div>
    40. body>
    41.  
    42. html>

    效果如下：

     如图可以得到，before是在内容出现之前创建的，after这个伪元素是在内容结束之后创建的

    六、总结

    • ::before和::after前面的双冒号，也可以写为单冒号

    • content是必备属性，里面可以填写简单的文字内容

    • JavaScript无法操作伪元素

    • 伪元素产生时，默认是行内元素，无法指定宽高，所以需要用display转为块级元素

  • 相关阅读:
    Language Server for Java 1.0 在VS Code上正式发布
    【JavaEE】网络编程
    [西湖论剑 2022]real_ez_node
    leetcode：118. 杨辉三角
    消除达人游戏小程序开发流程：专业性与创新的结合
    15 | Linux系统上安装python
    Windows安装Mysql--免安装版
    基于微信小程序的电影院买票选座系统
    【王道】计算机组成原理第五章中央处理器(五)
    MQ刷盘机制
  • 原文地址：https://blog.csdn.net/qq_52545155/article/details/128013091