attr() 理论上能用于所有的CSS属性但目前支持的仅有伪元素的 content 属性
注意： 浏览器兼容性

语法： attr( attribute-name <type-or-unit> )
<attribute-name> 为属性名称
<type-or-unit> 表示所引用的属性值的单位，默认为：string, 可以为color，url都可以

demo如下：
效果图：

增加角标显示

// html 
<div data-num='1' class="tip"><img src="@/assets/detailPng/01.png" alt="" /></div>
<div data-num='1' class="tip"><img src="@/assets/detailPng/02.png" alt="" /></div>
<div data-num='3' class="tip"><img src="@/assets/detailPng/03.png" alt="" /></div>
<div data-num='2' class="tip"><img src="@/assets/detailPng/04.png" alt="" /></div>
<div data-num='1' class="tip"><img src="@/assets/detailPng/05.png" alt="" /></div>


// css
<style>
.tip::after{
      content: attr(data-num);
      line-height: 23px;
      text-align: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #416ba5;
      position: relative;
      top: -75px;
      right: -28px;
      box-shadow: 0px 0px 6px 0px;
    }
</style>

有用就点个赞呐