如果有更多隱藏的步驟，則帶有步驟和箭頭的進度條

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

我在你編輯問題之前這樣做了，但是如果你想 go 沿着你的標簽暗示的純 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 中“向后” go； 您可以說“改變第五個元素”，但不能說“但只有在存在第六個元素時才這樣做”。 在第六個元素上使用偽選擇器意味着它上面的任何鏈接也將成為箭頭的鏈接。