Sprawdzanie atrybutu tytułu CSS, jeśli nie jest on pusty i dodaj treść

Question

Moim celem jest: sprawdzenie, czy atrybut title nie jest pusty; jeśli tak nie jest, należy dodać wartość tego atrybutu tytułu plus myślnik. Z drugiej strony, jeśli atrybut title jest pusty, "-" nie powinno być w ogóle dodawane.

Tu jest mój bieżący kod CSS:

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

ale to nie działa zgodnie z oczekiwaniami.

Na przykład:

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

powinien być wyświetlany następujący przy aktywowaniu:

moja nazwa użytkownika - niektóre tekstu

Ale jeżeli:

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

lub (Bez tytułu na div):

<div>some text</div> 

następnie wyświetlacz przy aktywowaniu powinno być:

jakiś tekst

Czy można to naprawić?

Answer 1

Do tego celu można użyć selektorów atrybutu w połączeniu z funkcją attr(). Funkcja attr() po prostu chwyta wartość danego atrybutu - nie obsługuje żadnych instrukcji warunkowych.

Należy zauważyć, że używam [title=""] i :not([title]), aby uwzględnić zarówno puste atrybuty tytułu, jak i brak atrybutu title. Możesz pominąć część :not(), dodając do swojej pierwszej reguły [title], ale to nie działa w Internecie E-przepraszam, miałem na myśli, że nie działa w 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>