css) aria-label 가상요소로 텍스트 넣기

[html]

aria-label="원하는 텍스트적기"

<a href="/" class="link">
	<img src="link.jpg" alt="링크" class="image" />
	<span class="button" aria-label="구매하기"></span>
</a>

 

 

 

[css]

가상요소 content 에 아리아 라벨을 쓰면 html에 적은 aria-label의 텍스트를 불러온다.

일반적으로 content에 쌍따옴표"" 안에 텍스트를 쓰는 것과 동일한 효과이다.

content: attr(aria-label)

.link:hover .button::before {
  content: attr(aria-label);  
  
  /* content: "구매하기" */
}