after1 [CSS] before after 선택자에 동적 content 적용하기 환경세팅 React + Next + TypeScript 최근 단일 페이지를 퍼블리싱 하면서 데이터로 뿌려주는 리스트형 요소들의 before 선택자 내부 content 를 동적으로 바꾸는 작업을 처리했다. 사실 이것저것 찾아보기 전까지는 단순히 js 코드 내에서만 해결하려고 했는데, css 내부에 attr 변수를 통해서 동적으로 처리해주는것이 가능했다. 동적 content CSS적용 코드 index.tsx /** 리스트 아이템 **/ 시멘틱태그 내부에 data-content 를 선언하고 내부 요소들을 태그 데이터로 넘겨준다. 이와 다양한 코드들오 넘겨주는것이 가능하다. index.css .wrap::after { position: absolute; width: 15px; height: 15px; left:.. 2023. 6. 28. 이전 1 다음 반응형