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;
}

我只是不确定如何将它们应用为：标签之后。他们需要成为的原因：标签之后是因为菜单是动态的

Answer 1

试试这个：

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

Answer 2

您可以使用评论中提到的: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>

链接锚点后添加分隔符

2 个答案: