如何用HTML/CSS为代码风格作品集添加缩进引导线

你当前的代码使用了多个独立的<pre>标签，这种结构会导致布局难以统一控制，直接给元素加左边框很容易破坏缩进对齐。下面是一种不打乱布局的实现方案，通过CSS背景渐变和统一的代码容器来模拟缩进引导线：

步骤1：重构HTML结构 #

将分散的<pre>标签替换为统一的代码容器，每行代码用单独的元素包裹，保证布局一致性：

<div class="code-editor">
  <div class="code-line" data-line="1">1       &lt;<span style="color: #0087ca;">!DOCTYPE PORTFOLIO</span>&gt;</div>
  <div class="code-line" data-line="2">2       &lt;html&gt;</div>
  <div class="code-line" data-line="3">3           &lt;head&gt;</div>
  <div class="code-line" data-line="4">4                &lt;title&gt; Alexander's Portfolio &lt;/title&gt;</div>
  <div class="code-line" data-line="5">5           &lt;/head&gt;</div>
  <div class="code-line" data-line="6">6           &lt;body&gt;</div>
  <div class="code-line" data-line="7">7               &lt;p class = <span class="about-me">"About Me"</span> &lt;/p&gt;</div>
  <div class="code-line" data-line="8">8               &lt;p class = <span class="about-me">"Hobbies"</span> &lt;/p&gt;</div>
  <div class="code-line" data-line="9">9               &lt;p class = <span class="about-me">"Contact Me"</span> &lt;/p&gt;</div>
  <div class="code-line" data-line="10">10          &lt;/body&gt;</div>
  <div class="code-line" data-line="11">11      &lt;/html&gt;</div>
</div>

步骤2：添加CSS实现引导线 #

利用容器的伪元素和线性渐变绘制垂直引导线，同时保证代码缩进的精准对齐：

/* 代码编辑器容器 */
.code-editor {
  font-family: 'Consolas', 'Monaco', monospace; /* 等宽字体确保缩进对齐 */
  background-color: #f8f8f8;
  padding: 1.2rem;
  position: relative;
  overflow-x: auto;
  line-height: 1.6; /* 统一行高，保证引导线与行对齐 */
}

/* 单行代码基础样式 */
.code-line {
  position: relative;
  padding-left: 3rem; /* 给行号预留空间 */
  white-space: pre; /* 保留原始空格缩进格式 */
}

/* 生成第一级缩进引导线 */
.code-editor::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.8rem; /* 对应第一级缩进的起始位置 */
  width: 1px;
  /* 用重复渐变绘制虚线效果 */
  background: repeating-linear-gradient(
    to bottom,
    #cccccc 0,
    #cccccc 1px,
    transparent 1px,
    transparent 1.6rem /* 和行高一致，保证线与行对齐 */
  );
}

/* 生成第二级缩进引导线 */
.code-editor::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7.2rem; /* 对应第二级缩进的起始位置 */
  width: 1px;
  background: repeating-linear-gradient(
    to bottom,
    #cccccc 0,
    #cccccc 1px,
    transparent 1px,
    transparent 1.6rem
  );
}

/* 可选：自动生成行号 */
.code-line::before {
  content: attr(data-line);
  position: absolute;
  left: 0;
  color: #999999;
  text-align: right;
  width: 2.5rem;
  margin-right: 0.5rem;
}

方案优势 #

• 引导线通过绝对定位的伪元素实现，不占据文档流空间，不会破坏原有布局；
• 等宽字体+white-space: pre保证缩进的精准对齐；
• 可通过调整伪元素的left值轻松修改引导线位置，新增缩进层级只需添加对应伪元素即可。

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