问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

请问：如何动态的修改CSS 中， label:after 伪类中的内容？

头像
大胡子民工潘半仙
    4.9k523

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

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

    通过 CSS 样式可以为 label 添加 ：：

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

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

    变态面试题css前端htmlcss3
    阅读 5.6k
    4 个回答
    得票最新
    头像
    mcck_hyj
      29612763
      ✓ 已被采纳
      <div class="field">
    <label after-content=":">用户名</label>
    <input />
</div>
      .field label:after {
  content: attr(after-content);
}
      头像
      阿古达木
        5741413

        用css变量？

        头像
        wuyuanaaa
          9021110
          <!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>

          头像
          chatgpt
            4.2k11043

            （怀疑你是来思否挖人的，看看谁又闲又能做题）
            分为两个子问题：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 标签

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