Прогресс-бар с шагами и стрелкой, если скрыто больше шагов

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;Вы можете сказать «измени пятый элемент», но не можете сказать «но делайте это, только если существует шестой элемент». Использование псевдоселекторов для шестого элемента будет означать, что любая ссылка на нем также станет ссылкой для стрелки.