如何用CSS为H2与<p>标签添加图片所示样式的边框？

当然有啦！这种带左侧装饰竖线的标题+段落组合，用CSS伪元素就能轻松搞定，不用额外加冗余的HTML标签，非常简便～

第一步：HTML结构 #

咱们只需要把h2和p放在一个容器里，结构干净清爽：

<div class="styled-section">
  <h2>这里是你的标题内容</h2>
  <p>这里是段落文本啦～ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

第二步：CSS样式实现 #

核心思路是用h2的::before伪元素来创建左侧的竖线，再通过间距控制让段落和标题文字对齐：

/* 容器基础样式，控制整体宽度和居中 */
.styled-section {
  max-width: 800px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* h2标题样式 */
.styled-section h2 {
  position: relative; /* 让伪元素相对于h2定位 */
  padding-left: 1.2rem; /* 给左侧竖线留出空间 */
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 0.8rem;
}

/* 左侧竖线的核心实现 */
.styled-section h2::before {
  content: ''; /* 伪元素必须的内容属性 */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px; /* 竖线的宽度 */
  background-color: #2563eb; /* 竖线的颜色，可根据需求修改 */
  border-radius: 2px; /* 可选：让竖线边角圆润一点 */
}

/* 段落样式，和标题文字对齐 */
.styled-section p {
  margin-left: 1.2rem; /* 和h2的padding-left保持一致，实现文字对齐 */
  color: #666;
  line-height: 1.6;
}

自定义调整建议 #

• 如果你想改变竖线的颜色，直接修改background-color的值就行，比如换成#f59e0b（橙色）或者其他品牌色
• 调整竖线的宽度就改width，想要更粗的线就调大数值
• 标题和段落的间距可以通过margin属性灵活调整，适配你的整体排版

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