CSS3中伪类的content和attr的用法

2018-06-08 12:22:00 2595 3 编辑:深正互联 来源:互联网

说起css的content,很多人都知道那就是用来在标签头尾插入内容的,但如果你说css里面的attr和content有啥关系,我想还是蛮多人不知道的吧,attr做前端的应该见名思义是用来操作html属性的,确实,在这里我们依然是用来跟属性相关操作

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>content-attr</title>

    <style>

        a:after {

           content: "("attr(href)")";

        }

        div:after{

           content: attr(abbr);/*不用引号也可以*/

        }

        img:after{

           content: "("attr(title)")";

        }

    </style>

</head>


<body>

    <a href="http://www.szhulian.com">深正互联</a>

    <div abbr="我是个属性,你看能获取到吗" title="000">我擦,attr你牛逼了</div>

    <img src="http://www.weipxiu.com/wp-content/uploads/2017/08/kulian.png" title="图片" alt="">

    <p>图片是单标签,不允许你使用这种伪类</p>

</body>

</html>

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联

15

技术从业经验

多一份方案,会有收获...

联系深正互联,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只想为给您带来一些惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询