如何保留CSS :before标签的同时维持原有布局的良好间距？

我明白你的困扰——添加伪元素标签后，原本好好的布局间距乱了，这其实是position: relative的特性导致的，咱们一步步来修复：

问题根源 #

你原来给:before用了position: relative，这种定位方式只是让元素视觉上移动，但它原本占据的文档流位置会保留，相当于这个伪元素“隐形”占了一块空间，把wrapper的内容往下挤，自然就破坏了原本的间距。

修复方案 #

只需要调整两个关键点，就能让标签正常显示，同时保留原布局的良好间距：

1. 给wrapper添加相对定位，作为伪元素的定位容器：

div.wrapper {
  border: 1px solid red;
  padding: 10px 10px 5px 10px;
  border-style: dashed;
  position: relative; /* 新增：让伪元素以它为基准定位 */
}

2. 修改伪元素的定位方式为绝对定位，脱离文档流不再占据空间：

div.wrapper:before {
  content: 'FAQ wrapper';
  font-size: 10px;
  position: absolute; /* 改成absolute，脱离文档流不影响布局 */
  top: -10px; /* 刚好对齐wrapper的padding-top，让标签贴在边框上方 */
  left: 10px; /* 和wrapper的padding-left对齐，保证位置统一 */
  color: red;
  background: white;
  padding-left: 5px;
  padding-right: 5px; /* 补全右侧内边距，让背景完全盖住虚线边框 */
}

为什么这样有效？ #

绝对定位的伪元素会脱离正常文档流，完全不占用wrapper内部的布局空间，相当于“悬浮”在wrapper上方。而给wrapper设置position: relative，是为了让伪元素的坐标以wrapper为基准，不会乱跑。

这样修改后，标签能正常显示在边框上方，同时wrapper的间距和你第一个示例完全一致~

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