如何为多行显示的博客标题每行添加5px左侧边框？

方法一：使用CSS box-decoration-break属性（推荐） #

这是最简洁的实现方式，利用box-decoration-break: clone让边框在每行文字处都显示：

.blog-title {
  border-left: 5px solid #2c3e50; /* 自定义边框颜色 */
  padding-left: 10px; /* 边框与文字的间距 */
  line-height: 1.8; /* 适配行高，让边框更协调 */
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容webkit内核浏览器 */
}

方法二：兼容旧浏览器的方案 #

如果需要适配不支持box-decoration-break的旧浏览器，可通过伪元素实现：

.blog-title {
  position: relative;
  padding-left: 15px; /* 预留边框位置+文字间距 */
  line-height: 1.8;
  display: inline-block;
}
.blog-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: #2c3e50; /* 边框颜色 */
}

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