如何仅用<hr>标签实现Font Awesome图标两侧显示水平线？

你的代码里线条不显示，核心问题是浏览器对<hr>的默认样式（比如上下外边距、边框）干扰了自定义样式的生效。只需要调整几处CSS就能实现你要的效果：

修复后的完整代码 #

CSS

html {
  background: #333;
}

.landing-content {
  height: calc(100vh - 40vh);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.landing-content h1 {
  font-size: calc(1.5rem + 4vw);
  font-weight: 700;
  color: #e8e8e8;
}

.landing-content p {
  font-size: calc(0.6rem + 0.5vw);
  color: #e8e8e8;
}

.landing-content a {
  margin-top: 10px;
  padding: 5px 10px;
  text-decoration: none;
  background: transparent;
  color: #e8e8e8;
  border: 2px solid #e8e8e8;
  border-radius: 1em;
  transition-duration: 0.3s;
  cursor: pointer;
}

.landing-content a:hover {
  background: #e8e8e8;
  color: black;
  border-color: transparent;
}

.title-line {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 20px 0;
  color: #e8e8e8;
  width: 80%; /* 可选：限制容器宽度，避免线条过长 */
}

.title-line hr {
  flex-grow: 1;
  border: none;
  height: 1px;
  background-color: #e8e8e8;
  margin: 0; /* 清除默认上下外边距 */
}

.title-line .icon {
  margin: 0 15px;
  color: #e8e8e8;
}

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<div class="landing-content">
  <h1 class="title">My Name</h1>
  <div class="title-line">
    <hr>
    <i class="fa-solid fa-user-astronaut fa-xl icon" aria-hidden="true"></i>
    <hr>
  </div>
  <p><q>Stellar quote</q> <span class=nowrap>- Smart Person</span></p>
  <a href="#">Get Started</a>
</div>

关键修改说明 #

1. 清除<hr>默认外边距：添加margin: 0到.title-line hr，浏览器默认给<hr>加了上下外边距，在flex布局里会导致线条被挤压得看不见。
2. 可选：限制容器宽度：给.title-line加width: 80%，可以避免线条撑满整个页面宽度，视觉效果更美观，你可以根据需求调整这个值。
3. 微调图标间距：把图标左右边距调到15px，让线条和图标之间的留白更协调。

这样修改后，两条水平线会均匀分布在图标两侧，完全符合你要的效果。

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