Search code examples
csspseudo-elementpseudo-class

Removing outline from a pseudo element that is focused

I'm trying to create a logging script, with anchors a link to specific lines. There's a header, which pushes everything down; now, these links of course, pull the content into view behind the header, and so I needed a way to bring them into focus past the header.

Pseudo elements to the rescue! At least, partly; the problem which came to light is that they each have a focus outline, for the links when clicked. Try as I might, I've been unable to get rid of this outline. Now, normally, an outline like this wouldn't really be a problem; it is here, however, given that the lines in the log come right after another, ala:

Annoying outline is annoying

As to what I've tried? Well, I've attempted to select the pseudo element's focus pseudo class, unsuccessfully:

The html, for reproduction of the problem;

<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 />

The css, for the attempt at solving the problem(as well as reproduction)

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

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

And finally, the jsfiddle, for a live example of the problem; to see the annoying outline, just click any link: Fiddle

TL;DR: I'm having difficulty removing a pseudo element's focus outline.

Solution

  • First rule of CSS, start simple, then work your way up. Pseudo elements are usually more of a last resort, but they can be very useful. As for this question the simplest way does indeed work.

    a {
    outline: none;
}

    JSFiddle

    Update:

    Here is a simplified version of your code: http://jsfiddle.net/imtheman/061coacy/4/