仅隐藏伪元素的轮廓

Question

我尝试使用:before伪元素相对于切换过滤器框的按钮绝对定位箭头。

我认为我无法相对于滤镜盒的位置，因为它的宽度与其他div相关，我需要将三角形与外部按钮对齐。

问题：当按钮聚焦时，轮廓出现在按钮及其:before中，也就是我的三角形。我正在寻找一个概述按钮的解决方案，而不是:before。

我已尝试过的内容：在outline: none;选择器中设置规则:before。没有工作。

我取得的成就：

我的代码，简化为问题目的：

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用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>

Answer 2

假设伪将用于在另一个元素旁边创建一个箭头，你实际上并不需要它是一个三角形，它可以是一个旋转的方形。它的下半部分将被另一个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>