[CSS] before after 선택자에 동적 content 적용하기

환경세팅
React + Next + TypeScript

 

 

 

최근 단일 페이지를 퍼블리싱 하면서 데이터로 뿌려주는 리스트형 요소들의 before 선택자 내부 content 를 동적으로 바꾸는 작업을 처리했다. 사실 이것저것 찾아보기 전까지는 단순히 js 코드 내에서만 해결하려고 했는데, css 내부에 attr 변수를 통해서 동적으로 처리해주는것이 가능했다.

 

동적 content CSS적용 코드

index.tsx

<li key={idx} data-content={idx + 1}>
 /** 리스트 아이템 **/
</li>

시멘틱태그 내부에 data-content 를 선언하고 내부 요소들을 태그 데이터로 넘겨준다.

이와 다양한 코드들오 넘겨주는것이 가능하다.

 

 

index.css 

.wrap::after {
  position: absolute;
  width: 15px;
  height: 15px;
  left: 0px;
  top: 0
  content: attr(data-content);px;
}

content 는 after, before 에 없어서는 안되는 요소이다.

해당 요소에 attr 로 태그 data-content 불러와 적용하면 실제 리스트에서 적용된 화면을 볼 수 있다.