详解：20 :before :after attr

贵哥的编程之路

发布于 2020-10-28 12:13:14

1.3K0

发布于 2020-10-28 12:13:14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .test1:after/*attr根据属性找到属性值*/
        {
            content: attr(class)"陈业贵"attr(data-url)"李文"attr(data-qq);
        }
        .test2:before
        {
            content: attr(style);
        }
    </style>
</head>
<body>
    <p class="test1" title="hello world" data-url="http://phpfamily.org" data-qq="2306613258">hello king</p>
    <p class="test2" style="color: red;border: 1px solid red;">this is a test!</p>
</body>
</html>

这个比较不容易，我还是截图把

是什么？ :before :after attr() 在什么之前做什么，在什么之后做什么 attr() 函数返回选择元素的属性值。怎么运用？问题？为什么第一个的hello king在前面，而第二个的this is a test!在后面呢？解决？记住了，核心来了了因为:after是代表属性值在内容的后面，所以内容在前面哈因为:before代表属性值在内容的前面也就是在this is a test!的前面

懂了把，兄弟，兄弟，不急，慢慢来就理解了

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/04/26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

attr