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>
有用就点个赞呐
