在匹配元素+元素css上的伪元素之后覆盖

Question

试图在聊天应用程序中实现一个简单的效果，如果用户发消息，在他的用户名之后应该总是出现 : 但如果机器人发消息，他的消息将有一个 .bot 类，我想覆盖 user:after 以获得不同的内容。

我无法修改 html，因为它是动态生成的。

.user {
  color: white;
  background: red;
}
.user:after {
  content: ": ";
}
.user:after + .bot {
  content: "=> ";
}

<span class="user">User1</span>
<span class="message">Hello</span>
<br />
<span class="user">Bot</span>
<span class="bot">Hello</span>

理想的输出应该是：

但是我可以编辑 css

这可能吗？或者我应该采用不同的方法。

Answer 1

请注意，当前更新的问题已经完成了 OP 试图实现的目标

---

你可以使用::before伪元素

仅供参考，您可以设置伪元素的样式（就像我一样）

.user {
  background: red;
  font-style: italic;
}
.message::before,
.bot::before {
  background: red;
  font-style: italic;
  position: relative;
  left: -4px
}
.message::before {
  content: ":";
}
.bot::before {
  content: "=>";
}

<span class="user">User1</span>
<span class="message">Hello</span>
<br />
<span class="user">Bot</span>
<span class="bot">Hello</span>

Answer 2

试试这个

.user:after {
  content: ": ";
}
.user + .bot:after {
  content: "=> ";
}

Answer 3

根据您更新的问题，这里是您的代码 sn-p：

.user + span:before{
    content: ": ";
    /*other rules you assign*/
}

.user + .bot:before { /*overriding just for bot*/
    content: "=> ";
}

<span class="user">User1</span>
<span class="message">Hello</span>
<br />
<span class="user">Bot</span>
<span class="bot">Hello</span>

否则您无法覆盖，因为 CSS 没有父元素选择器。

Answer 4

目前没有解决这个问题的纯 CSS 方法。