如何为带tooltip类的元素设置不同::after伪元素content值且不重复其他样式

有两种常用的实现思路，都不需要重复编写已经定义好的通用样式： #

方案1：按现有类单独覆写content属性 #

利用CSS选择器优先级规则，给每个带特殊类的tooltip单独指定::after的content值即可，其余样式会自动继承你已经写好的.tooltip::after通用规则：

/* 仅覆写content属性，其余属性继承通用样式 */
.tooltip.html::after {
  content: "HTML 专属提示内容";
}
.tooltip.vuejs::after {
  content: "VueJS 专属提示内容";
}
.tooltip.react::after {
  content: "React 专属提示内容";
}
.tooltip.angular::after {
  content: "Angular 专属提示内容";
}
.tooltip.laravel::after {
  content: "Laravel 专属提示内容";
}
.tooltip.rtl::after {
  content: "RTL 专属提示内容";
}

方案2：用自定义data属性动态绑定content（更灵活，推荐） #

如果后续提示内容可能修改、或者tooltip数量很多，用自定义属性的方式更省心，不需要频繁修改CSS：

1. 先修改HTML，给每个tooltip元素新增data-tooltip自定义属性，存放对应的提示内容：

<div class="list list-one">
  <h2>Demo 1 <span>- Default Dashboard</span></h2>
  <button class="tooltip html" data-tooltip="HTML 开发模板">HTML</button>
  <button class="tooltip vuejs" data-tooltip="VueJS 管理后台">VueJS</button>
  <button class="tooltip react" data-tooltip="React 响应式模板">React</button>
  <button class="tooltip angular" data-tooltip="Angular 项目模板">Angular</button>
  <button class="tooltip laravel" data-tooltip="Laravel 后台集成方案">Laravel</button>
  <button class="tooltip rtl" data-tooltip="RTL 适配版本">RTL</button>
  <img src="images/demo1.png">
</div>

2. 然后修改你原有CSS中.tooltip::after的content取值，用attr()函数直接读取自定义属性的值即可，其余原有样式完全不用改，另外注意你原来的代码里写了两次display: none，可以删掉重复的那条：

.tooltip::after {
  /* 把原来的content: ""替换为下面这行 */
  content: attr(data-tooltip);
  color: #303030;
  width: 140px;
  height: 39px;
  border-radius: 4px;
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 12px 14px 0px #eee;
  background-color: white;
  align-items: center;
  justify-content: center;
  display: none;
  font-size: 14px;
  font-weight: 200;
}

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