不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
CSS中的content属性 进入全屏
line

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来实现。

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line