attr()理論上能用于所有的CSS屬性但目前支持的僅有偽元素的content屬性
注意： 瀏覽器兼容性
語(yǔ)法： attr( attribute-name <type-or-unit> )
<attribute-name> 為屬性名稱
<type-or-unit> 表示所引用的屬性值的單位，默認(rèn)為：string, 可以為color，url都可以
demo如下：
效果圖：
增加角標(biāo)顯示
代碼：
// 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>
有用就點(diǎn)個(gè)贊吶
