CSS V形箭头未绕自身旋转，设置transform-origin无效如何解决

问题原因 #

1. 多余的margin-top偏移了伪元素实际位置：你给::after伪元素设置了top: calc(50% - .5em)已经实现垂直居中，额外加的margin-top: 5px导致伪元素整体向下偏移，盒子中心和你预期的箭头中心不重合。
2. SVG在伪元素容器内未居中：你使用SVG作为背景图，默认背景图对齐方式为左上对齐，SVG视口尺寸（814）和伪元素容器尺寸（1.5em1em）比例不一致，导致实际箭头图形在伪元素容器内本身就不居中，就算transform-origin: center生效，旋转的是容器中心而非箭头图形的中心。
3. CSS属性冗余+过渡规则冲突：.opened状态下重复定义了所有伪元素属性，还额外给.title加了无关的transition: rotate 300ms ease-in规则，没有实际作用还可能干扰过渡效果。

修复方案 #

简化后的CSS如下，仅保留差异属性即可：

.title {
    width: 100%;
    position: relative;
    margin-top: 5px;
    padding-right: 1.5em;
  
  &::after {
    content: "";
    background-image: url(data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'><path d='M1.9 13.8c-.1.1-.3.2-.5.2s-.4-.1-.5-.2l-.7-.7c-.1-.2-.2-.4-.2-.6s.1-.4.2-.5l4.7-5L.2 2c-.1-.1-.2-.3-.2-.5s.1-.4.2-.5L.9.3c.1-.2.3-.3.5-.3s.4.1.5.2l5.8 6.2c.2.2.3.4.3.6 0 .2-.1.4-.2.5l-5.9 6.3z' fill='%21262674'/></svg>);
    background-repeat: no-repeat;
    /* 新增背景居中，让SVG在容器内居中 */
    background-position: center;
    position: absolute;
    width: 1.5em;
    height: 1em;
    transition: transform .3s;
    /* 删掉多余的margin-top */
    transform: rotate(90deg);
    transform-origin: center;
    top: calc(50% - .5em);
    right: 0;
  }
}

.opened .title::after {
  /* 仅覆盖需要修改的transform属性即可，其余属性继承默认状态 */
  transform: rotate(270deg);
}

如果还是有细微偏移，可以手动调整transform-origin的具体坐标，比如transform-origin: 4px 7px 直接对应SVG视口的中心坐标，确保旋转轴和箭头几何中心完全重合。

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