非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.11 伪元素 before和after

一时失言乱红尘 2024-03-25 14:11 53阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.11 伪元素 ::before和::after
             *   *  8.11.1 伪元素 - ::before和::after(常用

![在这里插入图片描述][b2bfa5836052424c9f7ae40f9eb87c01.png_pic_center]

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

##### 8.11 伪元素 ::before和::after #####

###### 8.11.1 伪元素 - ::before和::after(常用 ######

*  ::before和::after用来在一个元素的内容之前或之后插入其他内容（可以是文字、图片)
    
     *  常通过 content 属性来为一个元素添加修饰性的内容。

<!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>
        .box::before {
          
          content: "abc";
          color: red;
        }
    
        .box::after {
          
          content: "efg";
          color: blue;
        }
      </style>
    </head>
    
    <body>
      <div class="box">
        我是div元素
      </div>
    </body>
    
    </html>

![在这里插入图片描述][6cfdb8946d28474c85638094c4d01962.png_pic_center]

还可以这样

![在这里插入图片描述][41c840f524d948bc85f9506b7cebb162.png_pic_center]

![在这里插入图片描述][b2b626470dd94d198b6d01cf3193ed0a.png_pic_center]

没问题

[b2bfa5836052424c9f7ae40f9eb87c01.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/685443cf470f4ff5a89310c6c6e5d7b3.png
[6cfdb8946d28474c85638094c4d01962.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d1e54c6115f14bb2a709604b0c2e4a53.png
[41c840f524d948bc85f9506b7cebb162.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/71eff9aaf3714174a6a9323ae1639bdd.png
[b2b626470dd94d198b6d01cf3193ed0a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3d76e6dcac9540febfa9d7b8309a6e1e.png