怎样不引入图片实现前端css实现x关闭按钮

本文链接：https://blog.youkuaiyun.com/qq_41867900/article/details/132410121

首先初始化一个dom节点

<span class="closeButton"></span>

设置样式

.closeButton {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  margin-right: 5px;
  float: right;
  cursor: pointer;
  color: #105c86;
 }

通过伪元素before after画两条线
margin-left 的设置是为了处理’线’的自身宽度

 &::before,
  &::after {
    position: absolute;
    // right: 0;
    width: 2px;
    height: 12px;
    margin-left: 2px;
    content: '';
    background: #105c86;
  }

分别试着旋转角度

   &::before {
        transform: rotate(-45deg);
    }

    &::after {
        transform: rotate(45deg);
    }

完整代码

.closeButton {
  width: 12px;
  height: 12px;
  margin-top: 5px;
  margin-right: 5px;
  float: right;
  cursor: pointer;
  color: #105c86;
  &::before,
  &::after {
    position: absolute;
    // right: 0;
    width: 2px;
    height: 12px;
    margin-left: 2px;
    content: '';
    background: #105c86;
  }
  &::before {
    transform: rotate(-45deg);
  }

  &::after {
    transform: rotate(45deg);
  }
}