Functions

Draft

AnyTypevalueattr(<text>attributeName )

선택자의 속성 값을 반환해준다.

구문

content:attr(attributeName)기본형식CSS2
가상 요소 선택자를 생성할 때 선택자를 갖는 요소의 속성 값을 콘텐츠로 사용한다.

매개 변수

<text>attributeName 필수
참조하고자 하는 태그 내 속성 명을 작성한다.

반환

AnyTypevalue

지정된 타입의 속성 값

지원 웹브라우저

기술 문서

일반적인 attr() 함수의 사용

아래의 결과 화면에서 링크 레이블 위에 마우스를 올리면 툴팁으로 연결될 URL 정보를 보여준다. 이때 보여주는 URL은 레이블에 링크 처리된 A 태그의 href 속성을 attr() 함수로 반환받아 가상 요소 선택자의 content 속성의 값으로 사용된다.

위와 같이 일반적으로 attr() 함수는 가상요소 선택자에서 content 속성의 값으로 사용된다.

CSS 코드 중에 아래와 같이 :active 가상 클래스는 터치 스크린을 탭하는 시점에 선택자로 사용되지만 바람직하지 않은 방식이다. 마우스 기반의 사용 환경에 최적화되어 있다는 점을 참고하길 바란다.

a:hover::after, a:active::after {
	display: block;
}