美文网首页
用css的:before和:after写对号和叉号

用css的:before和:after写对号和叉号

作者: 喵喵爱吃鱼_ | 来源:发表于2020-07-20 14:44 被阅读0次

对号

<div class="success"></div>

.success {
  position: relative;
  width: 16px;
  height: 16px;
  background: #093;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.success::before {
  position: absolute;
  content: '';
  width: 5px;
  height: 8px;
  transform: rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  top: 1px;
}

叉号

 <div class="error"></div>

.error {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 16px;
  height: 16px;
  background: #f00;
  border-radius: 50%;
}
.error::before, .error::after {
  position: absolute;
  content: '';
  width: 2px;
  height: 12px;
  background: #fff;
}
.error::before {
  transform: rotate(45deg);
}
.error::after {
  transform: rotate(-45deg);
}
image.png

相关文章

网友评论

      本文标题:用css的:before和:after写对号和叉号

      本文链接:https://www.haomeiwen.com/subject/stmekktx.html