从聚焦的伪元素中删除轮廓答案

【问题标题】：Removing outline from a pseudo element that is focused从聚焦的伪元素中删除轮廓
【发布时间】：2014-09-10 22:11:13
【问题描述】：

我正在尝试创建一个日志记录脚本，其中带有指向特定行的链接的锚点。有一个标题，它把所有东西都往下推；现在，这些链接当然会将内容拉到标题后面的视图中，因此我需要一种方法将它们带到标题之外的焦点。

伪元素来拯救！至少，部分地；暴露的问题是它们每个都有一个焦点轮廓，用于单击时的链接。尽我所能，我一直无法摆脱这个大纲。现在，通常情况下，这样的大纲不会成为问题。然而，它就在这里，因为日志中的行是接二连三的，唉：

至于我尝试了什么？好吧，我尝试选择伪元素的焦点伪类，但没有成功：

html，用于重现问题；

<a id="1" href="#1">[123456]</a><br />
<a id="2" href="#2">[123456]</a><br />
<a id="3" href="#3">[123456]</a><br />
<a id="4" href="#4">[123456]</a><br />
<a id="5" href="#5">[123456]</a><br />
<a id="6" href="#6">[123456]</a><br />
<a id="7" href="#7">[123456]</a><br />
<a id="8" href="#8">[123456]</a><br />
<a id="9" href="#9">[123456]</a><br />
<a id="10" href="#10">[123456]</a><br />
<a id="11" href="#11">[123456]</a><br />

css，用于解决问题（以及复制）的尝试

a::before {
    display: block;
    content: " ";  
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
}

a:focus::before { outline: none; }
a:active::before { outline: none; }

最后是 jsfiddle，这是问题的一个活生生的例子；要查看烦人的大纲，只需单击任意链接：Fiddle

TL;DR：我在移除伪元素的焦点轮廓时遇到了困难。

【问题讨论】：

a{outline: none;} 怎么样？ jsfiddle.net/imtheman/061coacy/1
@imtheman 上帝，我真是个白痴。我应该尝试这样做，这样我就不会浪费人们的时间了；如果您可以将其作为答案，我会接受。我认为问题出在伪元素上。
对于那些想知道的人，由于从链接中删除轮廓被认为是不好的做法，我在链接中滑了一个跨度并将轮廓应用于它。

标签： css pseudo-element pseudo-class

【解决方案1】：

CSS 的第一条规则，从简单开始，然后逐步向上。伪元素通常更多是最后的手段，但它们可能非常有用。至于这个问题，最简单的方法确实有效。

a {
    outline: none;
}

JSFiddle

更新：

这是您的代码的简化版本：http://jsfiddle.net/imtheman/061coacy/4/

【讨论】：