如何用::before/::after伪元素添加定位正确的CSS边框

需求 #

• 在<nav>元素内部，距离元素内侧1em位置分别设置左、右两条竖边框
• 不允许添加额外HTML标签，仅使用::before、::after伪元素实现
• 边框需相对于浅蓝色nav盒子定位，不随页面其他元素偏移

原有问题 #

原有代码生成的边框相对于整个HTML页面定位，没有绑定到nav元素，位置完全错误。

不推荐的冗余实现（额外加标签） #

<nav>
  <div class="lines"></div>
  Content
<nav>

目标无冗余实现 #

<nav>
  Content
<nav>

原有错误代码 #

CSS部分 #

html {background: #EEE; margin: 10em}

body {background: #DDD; margin: 0 auto;}

nav{background: lightblue; height: 80vh; padding: 1em;}


nav::before, nav::after{
  content: '';
  position: absolute;
    height: 80vh;
    border-right: 2px solid #EEE;
    border-left: 2px solid #AAA;
}


nav::before{left: 1em; }
nav::after{right: 1em; border-bottom: none;
}

HTML部分 #

<nav>
Test
Test
Test
</nav>

错误原因 #

position: absolute定位的元素，会向上查找最近的非static定位的祖先元素作为定位基准。原代码中nav默认是position: static，没有成为定位基准，导致伪元素最终相对于页面根元素定位，位置错乱。

修复后完整代码 #

CSS部分 #

html {background: #EEE; margin: 10em}

body {background: #DDD; margin: 0 auto;}

nav{
  background: lightblue; 
  height: 80vh; 
  padding: 1em;
  /* *核心修复*：给nav加相对定位，作为伪元素的定位容器，不改变自身布局 */
  position: relative;
}


nav::before, nav::after{
  content: '';
  position: absolute;
  /* 让边框从nav顶部开始 */
  top: 0;
  /* 高度自适应nav高度，不需要写死数值 */
  height: 100%;
}

nav::before{
  left: 1em; 
  /* 左侧分隔线用深灰色右边界 */
  border-right: 2px solid #AAA;
}
nav::after{
  right: 1em; 
  /* 右侧分隔线用浅灰色左边界 */
  border-left: 2px solid #EEE;
}

HTML部分（无修改） #

<nav>
Test
Test
Test
</nav>

优化点说明 #

• 新增position: relative到nav，解决定位基准错误的核心问题
• 补充top: 0让竖边框和nav顶部对齐
• 伪元素高度改为100%，自动适配nav高度，后续调整nav尺寸不需要同步修改伪元素样式
• 拆分两个伪元素的边框属性，避免生成多余的重复线条

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