前端进阶html+css01----伪元素::after和::before

原创已于 2023-08-08 23:11:12 修改 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #css3

于 2023-02-09 21:51:11 首次发布

html 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了如何利用CSS的::after和::before伪元素结合content属性在元素前后添加内容或图标。示例中展示了添加无内容的红色方块和图标的方法，强调了content和display:inline-block的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们常用::after和::before配合content:"来给元素的前后添加元素，一般用来添加icon.

 <style>
  /* 用法1：添加内容：
  1.必须要有content这个属性，就算你没有内容，放空也要有这个属性。
  2.必须要有display:inline-block，因为伪类元素默认是display:inline的，无法设置宽高。
   */
  .box::after{
    content:"";
    background-color:red;
    width: 10px;
    height: 10px;
    display: inline-block;
  }
  
  /*
   用法2：添加图标
    url(图片路径)
   */
  .box::before{
    content:url(./assets/sq_icon.png);
  }
</style>
<body>
 <div class="box">
   我是中间
 </div>
</body>