请问:如何动态的修改CSS 中, label:after 伪类中的内容?

假设我们现在有一个 HTML 元素:

<div class="field">
    <label>用户名</label>
    <input />
</div>

通过 CSS 样式可以为 label 添加

.field label:after {
  content: ':';
}

但是这样并不能实现我真正的需求,我的需求是,当系统使用英文时,使用 : ,使用中文时,使用 ,那么,请问:我们该如何动态的改变 label:after 中的 content 的值?假设不允许通过 JavaScript 动态更新 CSS 样式,也不允许动态改变元素的类与 ID,那又该如何实现?

阅读 5.6k
4 个回答
<div class="field">
    <label after-content=":">用户名</label>
    <input />
</div>
.field label:after {
  content: attr(after-content);
}

用css变量?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .main::before {
      content: attr(a);
    }
    .main::after {
      content: attr(a) "-" attr(b);
    }
  </style>
</head>
<body>
  <div class="main" a="11111111" b="22222">中间</div>
</body>
</html>

(怀疑你是来思否挖人的,看看谁又闲又能做题)
分为两个子问题:1.如何获取浏览器语言设置的信息;2.如何匹配到css上
按规范来讲,语言信息应该放到 html 标签上,所以 2 的答案是:

:lang(ch) .field label:after {
    content: ':'
}
:lang(en) .field label:after {
    content: ': '
}

问题 1 的话,貌似 css 没有直接解法,但是可以绕过:
a: 服务器根据请求信息,往返回里注入
b: js 通过 Navigator.language 修改 html 标签

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题