【CSS系列】被忽略的content属性

最新推荐文章于 2024-07-10 09:53:59 发布

六小登登

最新推荐文章于 2024-07-10 09:53:59 发布

阅读量1.6k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_32135281/article/details/89667724

版权

本文介绍了CSS的content属性，通常用于清除浮动和字体图标，但其实它还有更多未被充分利用的功能。content属性可用于在伪元素中插入文本、图片、HTML属性值，甚至创建动态计数器。通过counter函数，CSS可以实现递增数，创建有序列表等效果。文章展示了content属性的String、url、attr和counter值的用法，并提醒读者注意其浏览器兼容性问题。

摘要由CSDN通过智能技术生成

CSS的 content属性，大家应该都不陌生，很多时候我们都使用过，一般情况下你看到最多的用法无外乎这样两种：一种用于清除浮动，一种用于我们经常使用的字体图标。

.clear:after {
   
  content: "";
  display: block;
  clear: both;
}

.icon:before {
   
  content: "\e778";
}

大多数都会停留这个阶段，很少会探索更多的用法，甚至有些人认为它的用法也就这么多。

不过当你看到这篇文章时，会发现这是一种多么错误的想法。你会发现原来还有这么多，被你忽略而且好用的功能。

接下来就让我们一起见识见识它的更多用法。

介绍

首先我们先来看看 MDN 上对 content是如何描述的。

CSS 的 content属性用于在元素的 ::before和 ::after伪元素中插入内容。使用 content属性插入的内容都是匿名的可替换元素。

从上面看到它只能用于「伪元素」中，但其实它在 chrome 浏览器中，可用于任何元素，这个可能很多人都不知道，不信你可以看下面这个例子。

<template>
  <div class="box"></div>
</template>
<style>
.box {
  content: url(https://i-blog.csdnimg.cn/blog_migrate/9b1f38af18222bead3e0a080bdaaf775.jpeg);
}
</style>