在文字后面制作简单的斑点背景

最近接到了一个需求如下：

需求

拿到需求一看，顿时感觉非常简单，无非就是定位，伪元素之流的方法。于是就有了以下代码：
html部分

  <div class="demo-wrapper">
    <span class="text-wrapper">
      <span class="spot spot-left"></span>
      <span class="text">背景斑点</span>
      <span class="spot spot-right"></span>
    </span>
  </div>

css部分

    .demo-wrapper {
      text-align: center;
    }
    .text-wrapper {
      position: relative;
    }
    .text-wrapper > .spot {
      display: inline-block;
      width: 20px;
      height: 20px;
      border-radius: 10px;
    }
    .spot-left {
      position: absolute;
      bottom: -5px;
      left: 0px;
      background: #60ff00;
    }
    .spot-right {
      position: absolute;
      top: -5px;
      right: 0px;
      background: #e500ff;
    }

结果一看：

非预期效果

emmmm，资料一查，原来是position属性的问题，position属性会让该元素脱离文档流从而导致文字被遮挡。

解决方法：

我们可以利用position的特性，均为动态定位的兄弟元素间，靠后的居上。
修改后的html

  <div class="demo-wrapper">
    <span class="text-wrapper">
      <span class="spot spot-left"></span>
      <span class="spot spot-right"></span>
      <span class="text">背景斑点</span>
    </span>
  </div>

添加css

.text {
   position: relative
}

这样就能达到预期效果了。