如何根据HTML元素所在的类显示不同文本？

你之前的代码失效是因为原生CSS不支持嵌套选择器，不能把themainbody::after写在.category-rabbitmq的大括号里。正确的写法是用后代选择器，把类别和目标元素的伪元素关联起来：

基础实现代码 #

<style>
/* 当祖先元素有.category-rabbitmq类时，为themainbody添加后缀文本 */
.category-rabbitmq themainbody::after {
  content: " RabbitMQ";
}
</style>
<themainbody>Read more about</themainbody><br>

如果themainbody是.category-rabbitmq的直接子元素，也可以用更精准的子选择器：

<style>
.category-rabbitmq > themainbody::after {
  content: " RabbitMQ";
}
</style>
<themainbody>Read more about</themainbody><br>

多类别扩展 #

如果需要针对不同类别显示不同文本，只需复制规则并修改类名和内容即可：

<style>
.category-rabbitmq themainbody::after {
  content: " RabbitMQ";
}

.category-kafka themainbody::after {
  content: " Kafka";
}

.category-redis themainbody::after {
  content: " Redis";
}
</style>
<themainbody>Read more about</themainbody><br>

内容的提问来源于stack exchange，提问作者Sam Garforth