HTML CODE
<!-- ::after를 수정할 html element -->
<div id="root"></div>
JAVASCRIPT CODE
// ::after를 입력할 style element를 만듭니다.
let rootAfterStyle = document.createElement("style");
// 원하는 ::after style을 작용합니다.
rootAfterStyle.innerHTML = `#root::after {
content: '';
z-index: 3;
height: 6px;
}`;
// <head> tag에 넣습니다.
document.head.appendChild(rootAfterStyle);
// 이 후에 ::after style 수정이 가능합니다.
rootAfterStyle.innerHTML = rootAfterStyle.innerHTML.replace(
/height: [0-9]+px/,
"height: 12px"
);
결과 화면
javascript를 사용해서 css의 가상요소 ::after를 바꾸려면, 위와 같이 html header에 inline 방식으로 심어주어야 합니다.
'web > vanilla javascript' 카테고리의 다른 글
| javascript로 css의 @keyframes 애니메이션 만들기 (0) | 2023.05.17 |
|---|---|
| js로 notch 찾기 (0) | 2023.05.13 |
| 빨간색 네모 그리기 (0) | 2021.07.01 |
