Using element + element with after pseudo element : 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


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

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

Codepen for reference: http://codepen.io/knuxus/pen/zBwWBr?editors=1100