css实现背景透明内容不透明

首先实现透明的方式大家肯定都能想到opacity，但opacity会让背景及其子元素的所有内容都透明
http://www.html5code.net/webdesign/html-5396.html
https://blog.csdn.net/huiaixing/article/details/123938950

我使用的 是 before伪元素 + opacity 解决

  .status-row {
    display: flex;
    align-items: center;
    .circle-border {
      margin-right: 6px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &:before {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        content: "";
        position: absolute;
        opacity: 0.2;
        background: pink;
      }
    }
    .circle-center {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: red;
    }
  }