html - 在 FA 图标之间用 CSS 画一条线

Question

我怎样才能达到这个效果？我使用 FA (Font Awesome) 图标并自己添加边框，当我使用::after 并添加一行时，例如:

Content: "";
Background-color: grey;
height: 2px;
width: 300px;

它在图标本身之后开始(而不是在边框之后)。我是 CSS 的新手，这是解决问题的方法吗？我试着搜索那个，但无法提出我的问题，所以我找不到答案。抱歉，如果这是重复的，非常感谢。

使用的HTML代码

  <div class="content-wrap">
    <i class="fa fa-music icon1"></i>
    <i class="fa fa-signal icon1"></i>
    <i class="fa fa-star-o icon1"></i>
    </div>

使用的 CSS 代码

.icon1 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6rem;
    height: 6rem;
    font-size: 3rem;
    color: #777;
    border: 2px solid #777777;
    border-radius: 50%;
    padding: 1rem;

它们在一个宽度为 1140 像素的容器中间隔开。content-wrap div 有 display: flex 和 justify-content: space-between;

Answer 1

您可以使用 ::before 伪元素在圆圈下添加一行，并使用圆圈 background 和 box-shadow 隐藏部分行。

.content-wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F9F9F9;
  padding: 1em;
  overflow: hidden;
}

.content-wrap::before {
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  left: 0;
  Content: "";
  Background-color: grey;
  height: 2px;
}

.icon1 {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  font-size: 3rem;
  color: #777;
  border: 2px solid #777777;
  border-radius: 50%;
  padding: 1rem;
  background: #F9F9F9;
  box-shadow: 0 0 0 0.5em #F9F9F9;
}

<div class="content-wrap">
  <i class="fa fa-music icon1"></i>
  <i class="fa fa-signal icon1"></i> 
  <i class="fa fa-star-o icon1"></i>
</div>