前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS 伪类没有生效?探索 content 属性!

CSS 伪类没有生效?探索 content 属性!

作者头像
GopalFeng
发布2022-08-01 20:12:36
1.9K0
发布2022-08-01 20:12:36
举报
文章被收录于专栏:前端杂货铺-Gopal

问题

问题就是 CSS 伪类没有生效,具体表现如下,可见 demo[1]:

代码语言:javascript
复制
<span class="desc">
   我是 Gopal。
</span
代码语言:javascript
复制
.desc {
  display: block;
  font-size: 30px;
  color: #000;
}
.desc:before {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
}

可以看到,伪类并没有生效。

问题的解决

解决的方法很简单,设置 content 属性,而且要具有一定的宽高,可以设置 display 为 inline-block 和 block,让元素的宽高生效,如下,添加一行:

代码语言:javascript
复制
.desc:before {
+ content: ' ';
  display: inline-block;
  width: 10px;
  height: 10px;
  background: red;
}

那这个 content 是啥属性,为何具有如此魔力?

探索 content 属性

来看 MDN 的描述:

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

重点关注,插入内容,这里就很丰富了。这里大概说下几种常见的场景。以下的 Demo 都在这里[2]

填充字符串

我们经常需要在一些特殊的行后面加一些标识,比如品类列表,如果是新品则提示 New 字样。

代码语言:javascript
复制
<h2>品类列表</h2>
<ol>
    <li>苹果</li>
    <li class="newEntry">香蕉</li>
    <li>菠萝</li>
    <li class="newEntry">葡萄</li>
</ol>
代码语言:javascript
复制
.newEntry::after {
    content: " New!";
    color: red;
}

效果如下:

填充图片

有时候,我们希望在段落前面插入一个 ICON,可以通过 url()URI() 指定 ICON 资源地址。URI 值会指定一个外部资源(比如图片)。如果该资源或图片不能显示,它就会被忽略或显示一些占位(比如无图片标志)。

代码语言:javascript
复制
<p class="desc">我是 Gopal</p>
代码语言:javascript
复制
.desc:before {
   content: url('https://p3-passport.byteacctimg.com/img/user-avatar/a0383600d66ccc81b3396b75cf3a95ea~300x300.image');
}

效果如下:

计数器玩转列表编号

content 属性还有一个很强大的设置方式,counter() 函数。来看看吧!

对于列表,我们经常需要自定义它的编号,比如给编号数字添加相关背景等等。

那我们怎么通过 content 属性完成这个功能呢?

这里需要结合 CSS 计数器。CSS 计数器是网页范围变量,可以使用 CSS 规则更改其值。

我们通过 Demo 来看看怎么处理的。

先看 HTML 结构:

代码语言:javascript
复制
<div class="list">
  <div>My first item</div>
  <div>My second item</div>
  <div>My third item</div>
</div>

第二步,使用 counter-reset 属性设置一个计数器。list-number 是此处要使用的变量名。

代码语言:javascript
复制
.list {
  counter-reset: list-number;
}

第三步,使用 counter-increment 属性增加计数器的值。现在,每次出现 .list div 元素时,list-number 变量都会增加一。

代码语言:javascript
复制
.list div {
  counter-increment: list-number;
}

最后一步,在 content 属性的 counter() 函数中使用 :before 伪元素来显示数字。

代码语言:javascript
复制
.list div {
  counter-increment: list-number;
+  content: counter(list-number);
}

效果如下:

我们再多加修饰:

代码语言:javascript
复制
.list div {
  counter-increment: list-number;
  content: counter(list-number);
+  margin-right: 10px;
+  margin-bottom:10px;
+  width:35px;
+  height:35px;
+  display:inline-flex;
+  align-items:center;
+  justify-content: center;
+  font-size:16px;
+  background-color:#d7385e;
+  border-radius:50%;
+  color:#fff;
}

效果如下:

counter() 函数可以具有两个参数:计数器名称和计数器格式。对于第二个参数,可以使用任何有效的 list-style-type 值。比如,我希望显示罗马数字。那可以修改如下:

代码语言:javascript
复制
.list div:before {
  counter-increment: list-number;
- content: counter(list-number);
+ content: counter(list-number, lower-roman);
  // ....
}

是不是很酷?

最后,大家有在项目中经常用 content 属性么?经常用它的哪些功能呢?

参考

  • 使用CSS计数器花式玩转列表编号[3]

参考资料

[1]demo: https://codepen.io/gpingfeng/pen/GRQzBwV

[2]这里: https://codepen.io/gpingfeng/pen/QWQYVdM

[3]使用CSS计数器花式玩转列表编号: https://segmentfault.com/a/1190000038292189

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端杂货铺 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 问题
  • 问题的解决
  • 探索 content 属性
    • 填充字符串
      • 填充图片
        • 计数器玩转列表编号
        • 参考
          • 参考资料
          相关产品与服务
          区块链
          云链聚未来,协同无边界。腾讯云区块链作为中国领先的区块链服务平台和技术提供商,致力于构建技术、数据、价值、产业互联互通的区块链基础设施,引领区块链底层技术及行业应用创新,助力传统产业转型升级,推动实体经济与数字经济深度融合。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档