:focus ring remove on :before 伪元素

Question

我有一个包含 span 的按钮，然后有一个伪选择器，:before 在某些情况下应用于它。

当元素（按钮）获得焦点时，:before 也获得焦点和聚焦环，结果如下：

虽然我想将焦点环保留在按钮本身上，但我很难将其从包含的 :before 元素中移除。看到这个 JSFiddle：

HTML/CSS 相当基础：

.btn {
  width: 100px
}

.btn>span {
  position: relative;
}

.btn>span:before {
  display: block;
  content: '•';
  font-size: 32px;
  position: absolute;
  left: -13px;
  top: -13px;
}

<button class='btn btn-default'>
    <span>Text</span>
</button>

Answer 1

减少 line-height 然后隐藏溢出：

.btn {
  width: 100px
}

.btn>span {
  position: relative;
}

.btn>span:before {
  /*display: block; not need*/
  content: '•';
  font-size: 32px;
  position: absolute;
  left: -13px;
  top: 0;
  overflow:hidden;
  line-height:0.4;
}

<button class='btn btn-default'>
        <span>Text</span>
    </button>

Answer 2

我几乎可以通过调整伪元素的行高和顶部来删除工件轮廓。

不过，您也可以尝试使用 HTML • 在按钮中生成项目符号。

:focus ring remove on :before 伪元素

:focus ring removal on :before pseudo-element

html

css

pseudo-element