Как создать горизонтальную линию сквозь кнопку?

Question

[Tereverda]

Подскажите, как создать горизонтальную линию по центру кнопки во всю ширину страницы?
Верстаю в Bootstrap, видимо нужно использовать элементы :after и :before, но не могу подобрать комбинацию, чтобы все работало.

<div class="col-12 text-center">
    <button class="btn btn-outline-secondary" title="На верх">Наверх <i class="bi bi-arrow-up"></i></button>
</div>

Comments

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Ankhena]

Псевдик для кнопки, шириной 100vw. Прибить налево к правому краю кнопки.
Направо сделать от него тень.
Вываливание по ширине налево не дает прокрутки. Тень тоже не дает прокрутки.
Не нужно будет делать уродский overflow.

Либо задать border для секции, если она на всю ширину окна.

[Sanes]

https://getuikit.com/docs/heading#line-modifier

[Tereverda]

Sanes, спасибо! А вы этот фреймворк отдельно используете или совместно с бутсрапом, если вместе, есть ли конфликты?

[Tereverda]

/* Линия вдоль кнопки Наверх */
.btn-up-line {
  display: inline-block;
  position: relative;
}
.btn-up-line:before {
  right: 100%;
  margin-right: calc(5px + 0.3em);
  content: "";
  position: absolute;
  top: calc(50% - (calc(0.2px + 0.05em)/ 2));
  width: 2000px;
  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}
.btn-up-line:after {
  left: 100%;
  margin-left: calc(5px + 0.3em);
  content: "";
  position: absolute;
  top: calc(50% - (calc(0.2px + 0.05em)/ 2));
  width: 2000px;
  border-bottom: calc(0.2px + 0.05em) solid #e5e5e5;
}

[Sanes]

Tereverda, отдельно. Там всё что мне надо есть.

[Sanes]

Можете совместно использовать. Там префикс у стилей. Только выше его подключайте, чтобы не перебить глобальные стили.

Answer 1

[rootnoroot]

Через ::before к text-center
position absolute
и т.д

Answer 2

[Сергей delphinpro]

Зачем всё это?
Посмотрите на картинку иначе: кнопка просто висит поверх линии.

<hr>
<button>Наверх</button>

button {
  transform: translateY(-50%);
}