如何仅用CSS使两个指定H元素并排并添加分隔符（不修改HTML）

需求说明 #

无需修改现有HTML结构，实现.carousel-box容器内的h1.carousel-item-header与h2.carousel-item-subheader单行并排，以竖线|分隔，且两个元素可独立设置样式，不影响页面其他元素。

解决方案（Flex布局版） #

Flex布局是实现元素并排最灵活的方式，且能轻松控制对齐效果：

/* 仅作用于目标容器内的元素，避免全局样式污染 */
.carousel-box {
  display: flex;
  align-items: center; /* 让两个标题垂直居中对齐 */
}

/* 清除标题默认的上下外边距，避免自动换行 */
.carousel-box .carousel-item-header,
.carousel-box .carousel-item-subheader {
  margin: 0;
}

/* 给主标题添加竖线分隔符 */
.carousel-box .carousel-item-header::after {
  content: "|";
  margin: 0 0.6em; /* 调整竖线与两侧文字的间距 */
  color: #444; /* 自定义竖线颜色 */
}

/* 示例：分别设置两个元素的独立样式 */
.carousel-box .carousel-item-header {
  color: #1a1a1a;
  font-size: 1.6rem;
  font-weight: 700;
}

.carousel-box .carousel-item-subheader {
  color: #666;
  font-size: 1.3rem;
  font-weight: 500;
}

备选方案（行内块版） #

如果需要兼容更旧的浏览器，可使用行内块实现：

.carousel-box .carousel-item-header,
.carousel-box .carousel-item-subheader {
  display: inline-block;
  margin: 0;
  vertical-align: middle; /* 保证两个标题垂直对齐 */
}

.carousel-box .carousel-item-header::after {
  content: "|";
  margin: 0 0.6em;
  color: #444;
}

/* 自定义样式同Flex版 */
.carousel-box .carousel-item-header {
  /* 按需设置样式 */
}
.carousel-box .carousel-item-subheader {
  /* 按需设置样式 */
}

关键说明 #

1. 作用域控制：所有样式都以.carousel-box作为前缀，确保只影响目标容器内的元素，不会干扰页面其他标题。
2. 伪元素添加分隔符：通过::after给主标题插入竖线，无需修改HTML结构。
3. 独立样式支持：两个元素分别有专属类名，可单独设置颜色、字号、字重等样式。

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