如何制作如图所示的、分隔邮箱与热线的竖线？

下面是几种简单实用的实现方式，适合网页中的联系信息列表：

方法一：HTML 直接插入竖线 + 样式调整 #

直接在两个元素之间插入竖线字符 |，再通过 CSS 调整间距和样式：

<div class="contact-info">
  <span class="email">support@example.com</span>
  <span class="divider">|</span>
  <span class="hotline">400-123-4567</span>
</div>

<style>
.contact-info {
  display: flex;
  align-items: center;
  gap: 12px; /* 控制两侧间距 */
}
.divider {
  color: #999; /* 调整竖线颜色 */
  font-size: 16px;
}
</style>

方法二：CSS 伪元素实现（无需额外 HTML 标签） #

利用 ::after 伪元素给邮箱元素添加竖线，更简洁：

<div class="contact-info">
  <span class="email">support@example.com</span>
  <span class="hotline">400-123-4567</span>
</div>

<style>
.contact-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.email::after {
  content: "|";
  color: #999;
  margin-left: 12px; /* 控制竖线与邮箱的间距 */
}
</style>

方法三：CSS 边框实现 #

给元素添加左侧/右侧边框来模拟竖线，适合需要更粗或特殊样式的场景：

<div class="contact-info">
  <span class="email">support@example.com</span>
  <span class="hotline">400-123-4567</span>
</div>

<style>
.contact-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hotline {
  border-left: 1px solid #999;
  padding-left: 12px; /* 控制竖线与热线的间距 */
}
</style>

以上三种方法都能实现示例中的竖线分隔效果，可根据你的布局需求选择合适的方式调整颜色、间距和样式。

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