如何在每个div块之后放置一个“：：”？

Question

我试图在每个div块之后放置一个::after，以便说它是下一个带有图标>的块，但是我不知道如何放置。我做了步骤：：后，但我得到了下面的描述，但我想添加它之间的每个空格，我的圆圈将是我的::after svg图标如下：布局

.steps::after{
    content: ">"
}

<div class="container">
  <div class="row">
    <div class="col-md-4 steps">
      <div class="icon d-flex">
        <img src="https://code.google.com/images/developers.png" height="80px" />
        <div class="details ml-4 mt-2 text-center">
          <h2>How It Works</h2>
        </div>
      </div>
      <p class="ml-2 mt-3">demo</p>
    </div>
    <div class="col-md-4 steps">
      <div class="icon d-flex">
        <img src="https://code.google.com/images/developers.png" height="80px" />
        <div class="details ml-4 mt-2 text-center">
          <h2>How It Works</h2>
        </div>
      </div>
      <p class="ml-2 mt-3">demo</p>
    </div>
    <div class="col-md-4 steps">
      <div class="icon d-flex">
        <img src="https://code.google.com/images/developers.png" height="80px" />
        <div class="details ml-4 mt-2 text-center">
          <h2>How It Works</h2>
        </div>
      </div>
      <p class="ml-2 mt-3">demo</p>
    </div>
  </div>
</div>

Answer 1

只需指定他们的绝对位置，让他们去你想去的地方。

​

.steps::after {
  content: ">";
  position: absolute;
  top: 30%;
  right: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-md-4 steps">
      <div class="icon d-flex">
        <img src="https://code.google.com/images/developers.png" height="80px" />
        <div class="details ml-4 mt-2 text-center">
          <h2>How It Works</h2>
        </div>
      </div>
      <p class="ml-2 mt-3">demo</p>
    </div>
    <div class="col-md-4 steps">
      <div class="icon d-flex">
        <img src="https://code.google.com/images/developers.png" height="80px" />
        <div class="details ml-4 mt-2 text-center">
          <h2>How It Works</h2>
        </div>
      </div>
      <p class="ml-2 mt-3">demo</p>
    </div>
    <div class="col-md-4 steps">
      <div class="icon d-flex">
        <img src="https://code.google.com/images/developers.png" height="80px" />
        <div class="details ml-4 mt-2 text-center">
          <h2>How It Works</h2>
        </div>
      </div>
      <p class="ml-2 mt-3">demo</p>
    </div>
  </div>
</div>

​