Podświetlanie znacznika za pomocą CSS

Question

Mam tag HTML, który utworzyłem przy użyciu CSS3. Chciałbym "podkreślić" konkretną kartę. Idealnie, chciałbym mieć poświatę wokół tagu, który pokazuje, że jest aktywny. Używam ": after" do stworzenia kształtu tagu, ale nie pozwala mi to wyróżnić wokół rzeczywistego kształtu.

Oto Fiddle: http://jsfiddle.net/nocztpxv/2/

HTML

<a href="#" class="tag"> 
    InsertHTML 
</a> 

CSS

.active{ 
    border: 1px solid rgb(246, 255, 0);  
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6); 
} 

Jak widać, głównym punktem jest wokół wszystko z wyjątkiem części strzałkę/trójkąt. Czy ktoś wie, jak mogłem mieć ten sam podświetlony wygląd wokół strzałki/trójkąta?

Answer 1

Istnieje jedno rozwiązanie, które mogę wymyślić, ale wymaga niewielkich modyfikacji w modelu DOM. Rozwiązaniem jest zawijanie tekstu linku w obrębie elementu <span>, a następnie zamiast obramowania trójkąta użyjemy obróconego prostokąta dla tego efektu. Jednakże, ponieważ tło musi być wyżej w z-index niż obróconym prostokąta, jest potrzebne do budowy gniazd (tak, że możemy zadeklarować niebieskim tle na elemencie <span> zamiast

Zobacz skrzypce tutaj. http://jsfiddle.net/teddyrised/nocztpxv/6/ Dla trzy- wymiarową wizualizację stosu, zobacz tutaj: http://jsfiddle.net/teddyrised/nocztpxv/8/

Ponieważ istnieją tylko dwa pseudo-elementy możliwe i używasz zarówno ::before i ::after dla celów stylistycznych już, możemy użyć tylko dodatkowy poziom zagnieżdżenia :

<a href="#" class="tag"> 
    <span>InsertHTML</span> 
</a> 
<a href="#" class="tag active"> 
    <span>InsertHTML</span> 
</a> 
<a href="#" class="tag"> 
    <span>InsertHTML</span> 
</a> 

Dla CSS (uwaga: warto dodać prefiksy dostawców do CSS przekształcić właściwość):

.tag { 
    font-family: Helvetica, Arial, sans-serif; 
    display: inline-block; 
    color: #fff; 
    position: relative; 
    border-top-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
    margin: 0 30px 0 0; 
    text-decoration: none; 
} 

/* The rotated square */ 
.tag::after { 
    background-color: #588fe5; 
    display: block; 
    height: 27px; 
    width: 27px; 
    position: absolute; 
    top: 6px; 
    right: -13px; 
    content: ""; 
    transform: rotate(45deg); 
    z-index: 1; 
} 

/* Nested span */ 
.tag > span { 
    display: inline-block; 
    background-color: #588fe5; 
    position: relative; 
    padding: 10px; 
    z-index: 2; 
} 

/* The white dot */ 
.tag > span::before { 
    background: #fff; 
    width: 10px; 
    height: 10px; 
    content: ""; 
    display: inline-block; 
    border-radius: 20px; 
    margin: 0 5px 0 0; 
} 

/* Hover effects */ 
.tag:hover::after, .tag:hover > span { 
    background-color: #739fe4; 
} 

/* Active tag */ 
.tag.active, .tag.active::after { 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6); 
}