Flexbox与CSS伪类问题：复制左侧对阵图到右侧时紫色线条异常

嘿，我完全懂你现在的困扰——用flex的order属性反转列之后，原本用:before/:after画的紫色线条全乱了对吧？这核心原因是**order只改变元素的视觉排列顺序，DOM里的实际结构并没有变**，伪元素是基于原DOM位置来定位的，自然就和视觉布局脱节了。给你几个实用的解决思路：

思路1：直接调整Flex方向替代Order反转 #

这是最省心的方案，不用动伪元素的任何样式，直接从布局根源解决顺序问题。给右侧的.region-2设置flex-direction: row-reverse，让它的子元素直接反向排列，这样视觉顺序和DOM顺序一致，伪元素的定位逻辑完全不用改：

.region-2 {
  display: flex;
  width: 44%;
  flex-direction: row-reverse; /* 直接反转列的排列方向 */
}

思路2：针对反转列单独调整伪元素样式 #

如果必须保留order属性（比如有其他依赖逻辑），那就要给右侧区域的伪元素重新写定位规则。比如原本左侧的:before是在元素左侧画线条，右侧的就改成在右侧画，同时调整定位属性：

/* 假设左侧线条是用before实现的，右侧修改为： */
.region-2 .round:before {
  left: auto; /* 取消原左侧定位 */
  right: -20px; /* 改为右侧定位 */
  border-left: none; /* 取消原左边框 */
  border-right: 2px solid purple; /* 改成右边框作为线条 */
  /* 根据实际布局调整margin、宽度等属性 */
}

这种方法需要针对性适配伪元素的位置和样式，适合不能改flex方向的场景。

思路3：用Transform水平翻转整个区域 #

这个方法比较取巧，通过transform: scaleX(-1)直接翻转右侧区域，线条会跟着一起翻转，只需要把内部的文字再翻转回来就行：

.region-2 {
  display: flex;
  width: 44%;
  transform: scaleX(-1); /* 翻转整个区域 */
}
.region-2 .item {
  transform: scaleX(-1); /* 还原内部文字的方向 */
}

注意：这个方法可能会影响鼠标交互的位置（比如点击区域偏移），如果你的对阵图有交互逻辑，需要测试验证。

另外补充个小提醒：确保伪元素的父元素设置了position: relative，伪元素用position: absolute定位，这样线条的位置才会稳定，不会乱跑哦～

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