在伪元素之前去除聚焦环

Question

我有一个包含跨度的按钮，然后有一个伪选择器：在某些情况下应用于它之前。

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

虽然我想将焦点环保持在按钮本身上，但是我很难将其从包含的：before元素中删除。参见此JSFiddle：

https://jsfiddle.net/uhgsj6cp/3/

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 •在按钮内生成项目符号。