Evidenziazione di un tag tramite CSS

Question

Ho un tag HTML che ho creato utilizzando CSS3. Vorrei "evidenziare" una determinata scheda. Idealmente, mi piacerebbe avere un bagliore attorno al tag che mostra che è attivo. Sto usando ': after' per creare la forma del tag, ma questo non mi consente di evidenziare la forma attuale.

Ecco un violino: 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); 
} 

Come si può vedere, il momento clou è intorno tutto tranne la parte freccia/triangolo. Qualcuno sa come potrei avere lo stesso sguardo evidenziato attorno alla freccia/triangolo?

Answer 1

C'è una soluzione che posso pensare, ma richiede una leggera modifica al DOM. La soluzione è racchiudendo il testo del collegamento all'interno di un elemento <span>, e invece di usare i bordi per il triangolo, useremo un rettangolo ruotato per quell'effetto. Tuttavia, poiché il fondo deve essere superiore nella z-index del rettangolo ruotato, è necessario nesting (in modo che si dichiara sfondo blu sull'elemento <span> invece

Vedi violino qui:. http://jsfiddle.net/teddyrised/nocztpxv/6/ Per un tre visualizzazione tridimensionale della pila, vedere qui: http://jsfiddle.net/teddyrised/nocztpxv/8/

Come ci sono solo due pseudo-elementi possibili e si utilizza sia ::before e ::after per scopi stilistici già, possiamo usare solo un ulteriore livello di nidificazione :

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

Per il CSS (nota: si potrebbe desiderare di aggiungere prefissi vendor al CSS trasformare la proprietà):

.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); 
}