css中僞元素before或after中content的特殊用法attr

1.css 

li.volume .item
{
    position: relative;
    
}
li.volume .item:after
{
    content: attr(data-content);
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
    color: #fff;
}

2. dom元素

<li class="volume">
    <label for="">Volume</label>
    <div class="item" data-content="手">
        <div class="input_box"><input type="text"></div>
    </div>
</li>

3.預覽