CSS仅在一个元素上更改内容

如何解决CSS仅在一个元素上更改内容

我有以下html代码段：

<div class="account_button account_button2">Login</div>

现在我只想使用CSS更改该内容（“登录”）。 （因为我不允许更改HTML文件，所以我只能编写CSS覆盖文件）

因此，我使用以下CSS代码更改了内容：

.account_button {
    visibility: hidden;
} 

.account_button:after {
    content: 'Login / Register';
    visibility: visible;
}

这绝对好用。但是现在棘手的部分。

如果用户已经登录以下内容（span元素已添加到html），则通过Javascript更改了提到的html片段：

<div class="account_button account_button2"><span>Username</span></div>

我的CSS覆盖也将覆盖该值。我如何避免这种情况？我只想更改DIV元素的值，而不是在某些情况下通过Javascript添加的SPAN元素。

感谢任何想法！

编辑：一点澄清： 我有两个“ html状态”：

1。）

<div class="account_button account_button2">Login</div>

通过上面的CSS将其更改为显示“登录/注册”。

2。）

<div class="account_button account_button2"><span>Username</span></div>

如果JS将html更改为此，则以上CSS还将显示“登录/注册”。我希望它在存在的情况下在span标记内显示值。如果它们不存在，我想显示“登录/注册”。

解决方法

您可以对跨度使用绝对定位，以便在添加跨度时会覆盖其他设置的文本吗？

我设置了以下示例，可能会有所帮助： jsfiddle

.account_button {
  background: red;
  line-height: 30px;
  color: #fff;
  display: inline-block;
  position: relative;
}

.account_button span {
  background: red;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;
 }

这可以解决您的问题吗？

更新：设置按钮的宽度：

<div class="account_button account_button2">Login <span>Username</span> </div>
<div class="account_button account_button2">Login </div>

.account_button {
  background: red;
  line-height: 30px;
  color: #fff;
  display: inline-block;
  position: relative;
  padding: 0 10px;
  width: 200px;
  text-align: center;
}

.account_button::before {
  content: 'Login/Register';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue;
}

.account_button span {
  background: red;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;

 }

jsfiddle example

这可以解决吗？ 更新3： 添加高度和行高：

<div class="account_button account_button2"><span>Username</span> </div>
<br>
<div class="account_button account_button2">Login </div>
.account_button {
  background: red;
  line-height: 30px;
  color: #fff;
  display: inline-block;
  position: relative;
  padding: 0 10px;
  width: 200px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.account_button::before {
  content: 'Login/Register';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: blue;
  line-height: 30px;
}

.account_button span {
  background: red;
  width: 100%;
  height: 100%;
  color: #fff;
  left: 0;
  top: 0;
  position: absolute;
  text-align: center;

 }

jsfiddle示例

喜欢吗？