HTML5의 <progress> 요소에 CSS 의사 요소(::before, ::after)를 적용할 때 attr() 함수가 정상적으로 작동하지 않는 문제가 발생할 수 있습니다. 이는 일부 브라우저, 특히 WebKit 기반 브라우저에서 진행률 표시줄의 내부 의사 요소에 동적 속성 값을 읽어오는 attr() 사용을 완전히 지원하지 않기 때문입니다.
해결 방법: 정적 콘텐츠 사용하기
이 문제를 해결하려면 attr() 대신 CSS에 정적(static) 콘텐츠를 직접 지정해야 합니다. 아래 예제를 통해 확인해 보겠습니다.
HTML 예제
<progress max="100" value="60" data-value="5"></progress>
위와 같이 data-value 속성을 추가했더라도, 이 값을 attr(data-value) 형태로 불러오려 하면 의도대로 표시되지 않습니다.
CSS 예제
진행률 표시줄 앞뒤에 CSS 생성 콘텐츠를 추가하려면 다음과 같이 고정된 문자열 값을 지정합니다.
progress::-webkit-progress-bar:before,
progress::-webkit-progress-bar:after {
content: '989';
}이렇게 하면 WebKit 기반 브라우저(Chrome, Safari 등)에서 진행률 바의 앞과 뒤에 '989'라는 텍스트가 정상적으로 나타납니다.
추가 참고 사항
브라우저마다 진행률 표시줄을 스타일링하는 전용 의사 요소가 다르다는 점도 알아두면 좋습니다.
- Chrome / Safari:
::-webkit-progress-bar,::-webkit-progress-value - Firefox:
::-moz-progress-bar
따라서 크로스 브라우징을 고려한다면 각 브라우저의 전용 의사 요소를 함께 작성하고, 동적인 값이 필요한 경우에는 JavaScript로 DOM을 조작해 표시하는 것이 더 안정적인 방법입니다.