CSS hinzufügen Pseudo-Element im Fokus

Question

Ich möchte das Schließen Symbol im Fokus anzeigen. Es wird bereits beim Reagieren mit React Bootstrap angezeigt, aber ich möchte, dass es auch im Fokus angezeigt wird und der Kreis nicht angezeigt wird. Wenn ich den Mauszeiger auf li tag halte, wird das Symbol zum Schließen angezeigt (dies verwendet den Bootstrap). Jetzt möchte ich das gleiche Symbol auf Fokus auf a tag anzeigen. Here's the working fiddle.

Mein HTML:

<div class="test"> 
    <nav class="nav"> 
    <ul class="navtabs"> 
     <li> 
     <a href="showMe/1"> 
      <div class= "inside"> 
      <div class="delete"> 
       <i class="fa-times-circle"> </i> 
      </div> 
      </div> 
     </a> 
     </li> 
    </ul> 
    </nav> 
</div> 

Meine CSS:

.nav > ul.navtabs > li > a:focus > .fa-times-circle::before { 
    content: "\F057"; 
} 

Answer 1

Die > selector Sie verwenden bedeutet, dass .fa-times-circle::before nur gewählt werden, wenn es die unmittelbare Kind a:focus ist. Aber es ist nicht - Sie haben zwei Divs zwischen ihnen in Ihrem HTML.

Entfernen Sie den > Selektor, so dass Ihr gesamter Selektor wie .nav > ul.navtabs > li > a:focus .fa-times-circle::before aussieht, und es sollte funktionieren.

Achten Sie auch darauf, Ihr <a> Tag zu schließen. Sie vermissen die > Klammer nach der href.