CSS中的content属性应该大家都不陌生，conteng属性是和:befor、:after伪类搭配使用的，最常见的使用方法一般如下：

<div class="mod-testcase"></div>
<style type="text/css">
    div.mod-testcase:before {
        content:'测试用例开始！'
    }
    div.mod-testcase:after {
        content:'测试用例结束！'
    }
</style>

其实这个content是可以直接访问到该节点的Attribute的，比如，上面的代码可以改为：

<div class="mod-testcase" data-before="测试用例开始！" data-after="测试用例结束！"></div>
<style type="text/css">
    div.mod-testcase:before {
        content:attr(data-before)
    }
    div.mod-testcase:after {
        content:attr(data-after)
    }
</style>

当然，使用的场景其实还能更美妙，比如一些Hint的效果，就能完全用css来实现。