Скрыть контур только на псевдоэлементе

Question

Я пытаюсь установить абсолютную позицию стрелки относительно кнопки, которая переключает поле фильтра, используя :before псевдоэлемент.

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

Проблема: , когда кнопка находится в фокусе, контур присутствует как в кнопкеи его :before, он же мой треугольник.Я ищу решение, которое очерчивает кнопку, но не ее :before.

Что я уже пробовал: установить правило outline: none; в селекторе :before,Не сработало.

Что я достиг:

Мой код, упрощенный для целей вопроса:

/* Toggle control isn't necessary for the purpose of the question */

.button-filter {
  background-color: #333;
  color: $click-white;
  position: relative;
  border: none;
  color: #fff;
  padding: 1em;
}
.button-filter:before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: calc(50% - 15px);
  bottom: -20px;
  border-bottom: 15px solid #333;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

<button class="button-filter" autofocus>Filter</button>

Answer 1

Предполагая, что псевдо будет использоваться для создания стрелки рядом с другим элементом, вам не нужно, чтобы это был треугольник, это может быть повернутый квадрат.Нижняя часть этого будет скрыта другим div.

Если это так, вы можете установить псевдо как маленький квадрат, расположенный внутри кнопки.Я установил его красным, чтобы показать, где он находится, но в производстве вы можете установить прозрачный фон или установить z-index: -1;

И затем установить тень, расположенную там, где вы хотите, чтобы был треугольник.Так как это тень, а не реальный элемент, контур не будет применен к ней.(Примечание: элемент повернут, поэтому координаты тени сложны)

/* Toggle control isn't necessary for the purpose of the question */

.button-filter {
  background-color: #333;
  color: $click-white;
  position: relative;
  border: none;
  color: #fff;
  padding: 1em;
}

.button-filter:after {
  content: "";
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  left: 50%;
  bottom: 10px;
  transform: rotate(45deg);
  background-color: red;
  box-shadow: 40px 40px 0px 10px black;
}

<button class="button-filter" autofocus>Filter</button>

Answer 2

Вы можете изменить outline на box-shadow, чтобы избежать этого эффекта:

.button-filter {
  background-color: #333;
  position: relative;
  border: none;
  color: #fff;
  padding: 1em;
}
.button-filter:before {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: calc(50% - 15px);
  bottom: -20px;
  border-bottom: 15px solid #333;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.button-filter:focus {
  outline:none;
  box-shadow:0 0 5px blue;
}

<button class="button-filter" autofocus>Filter</button>