如何用CSS实现带底部突出标签（tab）效果的按钮

嘿，我懂你要的效果！你之前用::after没显示是因为踩了两个新手常犯的小坑：一是伪元素必须设置content属性（哪怕是空字符串''），二是默认伪元素是inline元素，没法直接设置宽高，另外还要给按钮加定位容器，不然伪元素会乱跑。

我给你整理了完整的解决方案，一步步来：

首先修正核心问题 #

你的::after没显示，根源是缺少content: ''——这是CSS伪元素（::before/::after）能渲染出来的必要条件，浏览器需要这个属性来识别“这是一个要显示的伪元素”。

完整实现代码 #

下面的代码会给按钮底部加一个居中的突出tab，和按钮的样式完全匹配：

.button {
  background: #aaa;
  font-size: 16px;
  color: #000;
  padding: 8px;
  width: 200px;
  border: 3px solid #000;
  border-radius: 6px;
  position: relative; /* 关键：让伪元素以按钮为基准定位 */
  margin-bottom: 20px; /* 给底部tab留点空间，避免被父容器截断 */
}

.button::after {
  content: ''; /* 必须：伪元素的标识 */
  position: absolute; /* 脱离文档流，相对于按钮定位 */
  bottom: -13px; /* 突出底部10px + 按钮边框3px，刚好对齐边框 */
  left: 50%;
  transform: translateX(-50%); /* 让tab水平居中 */
  width: 40px; /* 自定义tab的宽度 */
  height: 13px; /* 高度等于底部突出长度+边框宽度 */
  background: #aaa; /* 和按钮背景一致 */
  border: 3px solid #000; /* 和按钮边框一致 */
  border-top: none; /* 去掉顶部边框，和按钮底部无缝衔接 */
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px; /* 给tab加底部圆角，和按钮风格统一 */
}

<button class="button">BUTTON</button>

关键细节解释 #

• position: relative：给按钮加上这个，伪元素的absolute定位就会以按钮的四个角为基准，而不是整个页面。
• bottom: -13px：因为按钮有3px的边框，所以如果想让tab突出底部10px，就得把bottom设为-13px，这样tab的底部刚好在按钮下方10px的位置，边框也能和按钮完美衔接。
• border-top: none：去掉tab的顶部边框，避免和按钮的底部边框重叠，看起来更自然。

自定义拓展 #

如果不想tab居中，想放在左侧或者右侧，只需要调整left/right属性，去掉transform就行：
比如放在左侧底部：

.button::after {
  /* 其他属性不变 */
  left: 20px;
  transform: none;
}

这样就能轻松做出你想要的带底部tab的按钮啦！

内容来源于stack exchange