学习笔记 - H5 双色字

<template>
  <div>
      <div class="bsz">个</div>
      <i class="bsz">个</i>
      <i class="bsz2">个</i>
  </div>
</template>

<style lang="scss">
.bsz {
  font-style: normal;
  font-size: 100px;
  font-weight: bold;
  position: relative;

  &:after {
    /*重要的内容  content*/
    font-style: normal;
    font-size: 100px;
    font-weight: bold;
    background-color: rgba(255, 0, 0, 0.3);
    color: cyan;

    content: "个";
    /*中点代码     压层  实现视觉差效果  */
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    z-index: 10000;
  }
}
.bsz2 {
  font-style: normal;
  font-size: 100px;
  font-weight: bold;
  position: relative;
  color: #fff;
  &:after {
    /*重要的内容  content*/
    font-style: normal;
    font-size: 100px;
    font-weight: bold;
    background-color: rgba(61, 231, 23, 0.3);
    color: rgb(240, 252, 11);

    content: "个";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
    z-index: 10000;
  }
}
</style>