Javascript 幻灯片内文本前后的水平线

要在幻灯片内添加水平线。 我们希望在滑块内的行伙计们，我是新来设计这些你们可以帮助与代码请回答这个问题

<div class="slideshow-container">

  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="banner.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="banner.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="banner.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>

<div class="center">
  <span class="slide" onclick="currentSlide(1)"> 01.</span>
  <span class="slide" onclick="currentSlide(2)">02.</span>
  <span class="slide" onclick="currentSlide(3)">03.</span>
</div>

1/3
标题文本
2/3
标题二
3/3
标题三
❮
❯


1
2
3

---

您可以尝试以下方法：

.slide:not(:last-child)::after {
    margin: 4px 5px;
    content: '';
    width: 50px;
    height: 1px;
    background-color: black;
    display: inline-block;
}

但您也可以在之间创建其他跨距。

.center{
宽度：200px；
显示器：flex；
证明内容：之间的空间；
位置：相对位置；
溢出：隐藏；
}
.幻灯片{
边界半径：50%；
背景颜色：绿色；
宽度：30px；
高度：30px；
颜色：#fff；
显示：内联块；
线高：30px；
文本对齐：居中；
位置：相对位置；
z指数：1；
利润率：0.20px；
}
幻灯片：第一个孩子{
左边距：0；
}
幻灯片：之后，
幻灯片：之前{
内容：''；
位置：绝对位置；
背景：#fff；
z指数：1；
身高：100%；
宽度：10px；
右：-10px；
}
幻灯片：之前{
左：-10px；
右：自动；
}
.幻灯片：第一个孩子：之后{
右：-10px；
}
幻灯片：最后一个孩子：之后{
左：-10px；
}
幻灯片：最后一个孩子{
右边距：0；
}
中锋：之后{
内容：''；
边框：1px纯绿色；
位置：绝对位置；
高度：0px；
右图：-40%；
左：10px；
顶部：15px；
}

1
2
3

我附上了这张图片以供参考，请回答这个问题