在链接锚点后添加分隔符

Question

我正试图在每个锚标记后面添加一个span，这里是html:

<div class="region-links">
<a href="#" data-slide="0">Okavango Delta</a><span class="rl-line"></span><a href="#" data-slide="1">Moremi</a><span class="rl-line"></span>
<a href="#" data-slide="2">Linyanti</a><span class="rl-line"></span>
<a href="#" data-slide="3">Chobe</a><span class="rl-line"></span>
<a href="#" data-slide="4">Kalahari</a><span class="rl-line">
</span>
<a href="#" data-slide="5">Makgadikgadi</a>     
</div>
.region-links{
  margin: 40px 0;
}
.region-links a{
  color: #801416;
  margin: 0px 6px;
  font-size: 14px;
  line-height: 46px;
  display: inline;
  padding: 23px 0;
}
.region-links a:hover{
  text-decoration: underline;
}
.rl-line{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  display: block;
  height: 14px;
  margin-top: -7px;
  width: 1px;
  background: #801416;
}

我只是不确定如何将它们用作：after标签。它们需要是一个：after标签的原因是因为菜单是动态

Answer 1

您可以使用注释中提到的:after伪选择器来实现这一点。

.region-links{
  margin: 40px 0;
}
.region-links a{
  color: #801416;
  margin: 0px 6px;
  font-size: 14px;
  line-height: 46px;
  display: inline;
  padding: 0 15px 0 15px;
  position: relative;
  
}
.region-links a:hover{
  text-decoration: underline;
}
.region-links a:not(:last-of-type):after { /* Leaves out the last one */
  content: '/'; /* Can be either | or / */
  position: absolute;
  right: -12px; /* Adjust as needed */
  }

<div class="region-links">
<a href="#" data-slide="0">Okavango Delta</a><span class="rl-line"></span><a href="#" data-slide="1">Moremi</a><span class="rl-line"></span>
<a href="#" data-slide="2">Linyanti</a><span class="rl-line"></span>
<a href="#" data-slide="3">Chobe</a><span class="rl-line"></span>
<a href="#" data-slide="4">Kalahari</a><span class="rl-line">
</span>
<a href="#" data-slide="5">Makgadikgadi</a>     
</div>

Answer 2

试试这个：

.region-links a::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  ...
}