CSS - attr() 함수

attr() 는 요소의 속성 값을 문자열로 반환하는 함수입니다.

예를 들어 attr(X) 요소에 지정된 속성의 값을 반환합니다. 요소에 속성 값이 없으면 빈 문자열이 반환됩니다.

예컨대, <a> 태그에서 href 가 가리키는 URL 이 있습니다. 여기서 content 와 함께 사용하면 attr() 에서 href 의 URL 을 검색합니다.

::after 를 지정하여 해당 링크의 content 바로 뒤에 문자열이 삽입됩니다. 예를 들면 다음과 같습니다.

@media print {
   a[href]::after {
     content: attr(href); 
  } 
}

위 규칙은 (속성 선택자를 사용하여) href 속성이 있는 모든 링크를 선택한 다음 attr() 함수를 사용하여 href 속성의 값을 검색해서 해당 값을 링크 내용 뒤에 삽입합니다. 

attr() 함수는 사용자 정의 data-* 속성을 포함하여 요소의 모든 속성 값을 검색할 수 있습니다. 예를 들면 다음과 같습니다.

<li data-label="하보니">PHP</li>

<style>
li::before {
  content: attr(data-label);
  color: red;
}
</style>

여기서 ::before 를 지정했기 때문에 "하보니" 문자가 앞에 출력되는 것을 확인활 수 있습니다.

<그림 1>

attr() 은 모든 주요 브라우저 (Chrome, Firefox, Safari, Opera, Internet Explorer 및 Android 및 iOS)에서 지원됩니다.