Verifica attributo titolo CSS se non è vuoto e aggiungi contenuto

Question

Il mio obiettivo è: verificare se l'attributo titolo non è vuoto; se non lo è, dovrebbe essere aggiunto il valore di questo attributo titolo più un trattino. D'altra parte, se l'attributo title è vuoto, allora "-" non dovrebbe essere aggiunto affatto.

Ecco il mio codice CSS corrente:

div:hover::before{content:attr(title):not(attr(title)="") " - ";} 

ma non funziona come previsto.

Ad esempio:

<div title="My username">some text</div> 

dovrebbe visualizzare il seguente al passaggio del mouse:

mio username - un testo

Ma se:

<div title="">some text</div> 

o (Nessun titolo sulla div):

<div>some text</div> 

poi il display al passaggio del mouse dovrebbe essere:

un testo

E 'possibile risolvere il problema?

Answer 1

Per eseguire questa operazione è possibile utilizzare selettori di attributo in combinazione con la funzione attr(). La funzione attr() semplicemente acquisisce il valore di un determinato attributo - non supporta alcuna istruzione condizionale stessa.

Si noti che io uso [title=""] e :not([title]) per tenere conto sia degli attributi del titolo vuoto sia della mancanza di un attributo titolo del tutto. È possibile omettere la parte :not() includendo [title] nella prima regola, ma non funziona in Internet E- scusate, volevo dire che non funziona in Chrome.

div:hover::before { 
 
    content: attr(title) " - "; 
 
} 
 

 
div[title=""]:hover::before, div:not([title]):hover::before { 
 
    content: none; 
 
}

<div title="My username">some text</div> 
 
<div title="">some text</div> 
 
<div>some text</div>