如何仅旋转CSS::before伪元素的背景而不旋转其内部文字标签

云上老周

2026-9-29

解决方案

transform属性会作用于元素的所有内容，无法单独给伪元素的背景应用变换，所以推荐拆分伪元素实现需求：用::before承载旋转的背景，::after单独放置不需要旋转的文字，两个伪元素独立渲染互不影响。

调整后代码

CSS代码

div {
  width: 50px;
  height: 5px;
  position: relative;
  background: #ff756b;
  margin-top: 55px;
}

/* 仅负责旋转的背景，无文字内容 */
div::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -33px;
  background: red;
  border-radius: 20px 20px 3px 20px;
  transform: rotate(45deg);
  width: 22px;
  height: 22px;
}

/* 仅负责展示文字，无旋转效果 */
div::after {
  content: 'label';
  position: absolute;
  left: -5px;
  top: -33px;
  color: white;
  width: 22px;
  height: 22px;
  /* 文字居中适配，可按需调整 */
  display: flex;
  align-items: center;
  justify-content: center;
}