html - 通过 css 更改默认文本不起作用

Question

我有一个默认设置为以下的页面:

<h1 class="header">
   <span class="icon icon-lock"></span>
   "Checkout"
</h1>

在我的 cshtml 页面中，我测试了某个条件，如果满足，我将另一个类添加到名为“checkout2”的元素上，我可以在 chrome 工具中看到它。所以 html 变成:

<h1 class="header checkout2">
       <span class="icon icon-lock"></span>
       "Checkout"
    </h1>

所以现在在我的 CSS 中我有以下内容:

.checkout2:after {
   content: 'My new text';
}

内容没有改变任何想法，为什么？

Answer 1

看起来语义很差，因为您的示例中没有 .checkout2 我将假设您正在使用 addClass 将其添加到错误的元素中。这是它如何工作的一个例子......干杯

.header:after {
  content: attr(data-first);
}

.header:hover:after {
  content: attr(data-second);
}

<h1 class="header" data-first="Hover Me!" data-second="WEEEEEEEEEEE!">
   <span class="icon icon-lock"></span>
</h1>