进度栏带有步骤和箭头（如果还有更多步骤被隐藏）

Question

我试图制作一个进度条，如果还有更多内容仍被隐藏，则显示箭头。为了更清楚，我做了这些：
之前：

之后：

所以我想在后面的图片中添加箭头，如果我在内容的结尾，我希望它再次隐藏。

我的问题是：我从哪里开始？

我有进度条：

 <div class="scrollmenu">
        <div class="progress-bar">
            <p class="divided">
                @foreach($survey['data']['formCategories'] as $key => $category)
                    <span><a class="progress-btn"
                             id="A{{$category['id']}}">
                            <span>{{$key + 1}}</span><br>
                        </a></span>
                    <span class="divider"></span>
                @endforeach
            </p>
        </div>
    </div>

但是除此之外，我不知道从哪里开始

@Dan给出的答案很接近，但我要在内容上放置箭头，而不是编辑或添加内容。

Answer 1

在您编辑问题之前，我已经这样做过，但是如果您想沿着仅CSS的路线，因为您的标签所暗示的（您不应该，应该有更多的运气来适当地更改foreach循环），那么您可以隐藏第5个元素之后的所有内容，并将第6个元素转换为箭头显示以前隐藏的最后一个元素。

这支笔很草率，但希望它能使您了解如何使用伪选择器。

ul.progressblobs {
  display: table;
}
ul.progressblobs > li {
  display: table-cell;
  border: 3px solid black;
  border-radius: 50%;
  width: 3em;
  height: 3em;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
ul.progressblobs > li.arrow, ul.progressblobs > li:nth-child(n+6) {
  display: none;
}
ul.progressblobs > li:nth-child(n+6) ~ li.arrow {
  display: table-cell;
}

<ul class="progressblobs">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li class="arrow" role="presentation">&gt;</li>
</ul>

编辑：我已经看到您对不想编辑内容的评论。问题是，添加内容的唯一真实方法就是更改我之前发布的第六个元素。这是因为您不能在CSS中“后退”。您可以说“改变第五个元素”，但不能说“但只有在第六个元素存在的情况下才能这样做”。然后，在第六个元素上使用伪选择器将意味着其上的任何链接也将成为箭头的链接。