从焦点的伪元素中删除轮廓

Question

我正在尝试创建一个日志记录脚本，其中包含指向特定行的链接。有一个标题，将一切都推倒;现在，这些链接当然会将内容拉到标题后面的视图中，因此我需要一种方法将它们聚焦在标题之后。

拯救的伪元素！至少，部分;发现的问题是它们每个都有焦点轮廓，点击时链接。尽我所能，我一直无法摆脱这个大纲。现在，通常情况下，这样的轮廓不会成为问题;然而，在这里，由于日志中的行正好接近，ala：

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

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：我很难删除伪元素的焦点轮廓。

Answer 1

CSS的第一条规则，从简单开始，然后按照自己的方式工作。伪元素通常是最后的手段，但它们非常有用。至于这个问题，最简单的方法确实有效。

a {
    outline: none;
}

JSFiddle

<强>更新

以下是代码的简化版：http://jsfiddle.net/imtheman/061coacy/4/