巧用CSS

111 阅读1分钟

前言: 本篇文章用于记录作者在平时学习过程中遇见的一些有趣实用的CSS小技巧

巧用 attr

这里注意,我在html里写了 data 属性

<div class="avatar" data-messages></div>

然后,在css里的伪元素::before中,通过attr()来获取到data-messages的数据

.avatar::before {
    content: attr(data-messages);
}

利用上述的操作,可以更加灵活的去控制标签的文本内容。上述的徽标就是基于attr的特性来实现的!


该文章将会持续更新...