CSS의 content는 도무지 쓸모 없는 요소라고 생각했는데 아래와 같이도 쓸 수 있었다.

<span data-number="1">1</span>

&::before {
  content: url(imgurl);
}

&::after {
  content: attr(data-number);
}

보통 content 값을 넣을래도 그렇게 넣는 경우는 웹접근성에 위배되는 경우가 대다수기 때문에 실제로는 ::before, ::after를 쓸 때 반드시 따라가는 요소정도로만 쓰거나 그나마 기능적으로 쓸만한게 counter로 쓰는거였는데 이렇게도 쓸 수 있다는걸 11년차만에 알게 됐다. 그래서 기록.

참고

• https://developer.mozilla.org/en-US/docs/Web/CSS/attr

잡담

요즘 회사 새 프로젝트의 UI개발 부분 리드를 하고 있는데, 팀에 코드 리뷰 문화가 안잡혀 있어 내가 리더란 핑계로 이 프로젝트만큼은 코드 리뷰를 시도하고 있는데 같이 하는 동료들이 아무래도 부담이 가는지 사실상 내 일방적인 코드리뷰(코드스멜에 가깝긴한데)가 되고 있어서 의견만 전달하다 리뷰하던 코드에서 나도 하나 배웠다!