Изменить текст кнопки bootstrap 4 в медиа-точке останова

Question

Изменение содержимого кнопки bootstrap на контрольной точке мультимедиа добавляет контент, но не удаляет предыдущий контент.

Скажем, у меня есть эта кнопка

<button type="button" class="mybutton btn btn-outline btn-sm">The Before</button>

Я нажал точку останова и изменил текст кнопки

.mybutton:before {
  content: "The After";
}

Результат кнопки должен быть "После", но вместо этого это "AfterThe Before"

Оказывается css является

<button type="button" class="mybutton btn btn-outline btn-sm">
  ::before
  The Before
</button>

Answer 1

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

.nav-pills, .nav-link > a {
  font-size: 0 !important;
}