CSS 제목 속성이 비어 있지 않고 내용이 추가되어 있는지 확인하십시오.

Question

목표는 다음과 같습니다. title 속성이 비어 있지 않은지 확인하십시오. 그것이 없으면이 제목 속성의 값과 하이픈을 더해야합니다. 반면 title 속성이 비어 있으면 "-"을 전혀 추가하지 않아야합니다.

여기에 내 현재 CSS 코드 :

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

하지만 예상대로 작동하지 않습니다.

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

이 호버에 다음과 같은 표시됩니다 : 예를 들어

내 이름 - 텍스트

그러나 경우가 :

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

또는 (DIV에는 제목) :

<div>some text</div> 

는 호버에 표시가 없어야한다 :

텍스트

그것을 해결할 수 있습니까?

Answer 1

attr() 함수와 함께 속성 선택기를 사용하여이를 수행 할 수 있습니다. attr() 함수는 단순히 주어진 속성의 값을 가져옵니다 - 모든 조건문 자체를 지원하지는 않습니다.

제목 속성이 모두 부족하고 빈 제목 속성을 모두 설명하기 위해 [title=""]과 :not([title])을 사용합니다. 첫 번째 규칙에 [title]을 포함하여 :not() 부분을 생략 할 수는 있지만 인터넷에서 작동하지 않습니다. 죄송합니다. 크롬에서 작동하지 않습니다.

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>