pseudo 요소의 content 속성을 JS 에서 변경하는 방법. (dataset)

pseudo 요소는 DOM 요소가 아니라서 직접적으로 변경할수없고 약간 우회해야한다.

 

dataset 속성의 값을 삽입해준다.

document.getElementById ("foo").dataset.label = "Label"

위와같이 한뒤 HTML 을 확인해보면

<div id="foo" data-label="Label"><div/>

이런식으로 html 에 저장이된다. 이제 이 dataset 을 CSS 에서 "attr" 이라는 css 함수를 통해 읽어드린다.

attr 는 css 에서 사용할수있는 calc() 과 비슷한 css 전용 함수이다.

#foo::before {
	
    content: attr(data-label);

}