如何为span元素添加偏移边框并解决旋转正方形定位与外边框创建问题

我来帮你搞定这个偏移边框的效果！先梳理下你代码里的几个关键问题，然后一步步修正：

核心问题分析 #

• .ts-divider span:before 未生效：这个伪元素缺少 content: '' 和 position: absolute 属性，导致定义的外边框根本不会渲染出来。
• 旋转正方形无法左定位：当前用 left: 6px 是相对于父级span的位置，而且父级span没有设置定位，导致定位基准不对；另外绝对定位元素用margin调整位置不如直接用left/right属性精准。
• 外边框逻辑混乱：你需要明确内外边框的层级，通过伪元素分别实现外框和内框的偏移效果。

修正后的完整代码 #

:root { 
  --primary: #0098fa; 
  --accent: #effaff; 
  --dark: #394e67; 
  --darker: #2f3640; 
}

.ts-divider { 
  position: absolute; 
  z-index: 1; 
  width: 21px; 
  height: 21px; 
  transform: translateY(100%); 
  color: var(--primary);
}

.ts-divider:after { 
  content: ''; 
  position: absolute; 
  z-index: 1; 
  width: 100px; 
  height: 1px; 
  top: 10px; 
  background-color: currentColor; 
  opacity: .6;
  /* 让线条从正方形右侧延伸，避免重叠 */
  left: 21px;
}

.ts-divider span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 外边框正方形 */
.ts-divider span:before { 
  content: ''; /* 必须添加，伪元素才会显示 */
  position: absolute; /* 开启绝对定位 */
  width: 70.75%; 
  height: 70.75%; 
  left: 0; /* 定位到左侧 */
  top: 50%;
  transform: translateY(-50%) rotate3d(0, 0, 1, 45deg); /* 先垂直居中再旋转 */
  border: 1px solid var(--darker); 
}

/* 内边框/填充正方形 */
.ts-divider span:after { 
  content: ''; 
  position: absolute; 
  z-index: 1; 
  width: 41%; 
  height: 41%; 
  left: 0; /* 同样定位到左侧 */
  top: 50%;
  transform: translateY(-50%) rotate3d(0, 0, 1, 45deg); /* 垂直居中+旋转 */
  background-color: var(--darker); 
  border: 1px solid var(--primary); 
}

<span class="ts-divider"> <span></span> </span>

关键调整说明 #

1. 给内部span添加定位：设置.ts-divider span为position: absolute，让两个伪元素都相对于它定位，确保位置控制精准。
2. 修复before伪元素：添加content: ''和position: absolute，让外边框显示出来；同时用left: 0把它定位到左侧，结合transform: translateY(-50%)实现垂直居中。
3. 调整after线条位置：把.ts-divider:after的left设为21px（和容器宽度一致），让线条从正方形右侧开始延伸，避免重叠。
4. 统一正方形定位逻辑：两个伪元素都用left: 0和垂直居中的transform，确保它们都靠左对齐且居中显示。

这样调整后，你就能得到左侧对齐的偏移边框效果，外边框和内框也能正确渲染啦～

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