knuxus knuxus - 5 months ago 22
CSS Question

Override after pseudo element on matching element+element css

Trying to achieve a simple effect in a chat app, where if a user messages, after his username should always appear a

:
but if a bot messages, his message will have a class of .bot and i would like to override that
user:after
to have different after content.

I can't modify the html since its dynamically generated.



.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>





Ideally the output should be:
output

But the css is fine for me to edit

Is this possible at all? Or should i pursue a different approach.

Answer

Note that the current updated question already does what OP is trying to achieve


You can use ::before pseudo element

Just FYI, you can style the pseudo elements (as I did)

.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>