伪元素常规用法

原创已于 2022-05-19 20:59:34 修改 · 822 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-05-19 20:58:44 首次发布

伪元素常用于给在某个元素之前添加图片，例如想在某个dom之前添加图片，却不想在html结构写img标签，就可以在style样式中使用::before添加伪元素。

<html>
  <div class="container">
    <div class="mydiv"></div>
  </div>
</html>

常规写法

.mydiv::before{
  content:"",
  background:url() center center no-repeat;
  background-size:100% 100%;
  
  width:100px;
  height:100px;
}

或者Scss写法

  .mydiv{
    /*设置当前元素的伪元素*/
    &::before{
    
    }
  }

注：（::before和::after必须配合content属性使用，content定义插入的内容，可以为空。）