티스토리 뷰
<html>
<ul>
<li class="where_you_are">
<i class="process__numbering">02</i>약관동의
<span class="where_you_are__hidden_text">
현재 '약관동의' 과정에 있습니다.
</span>
</li>
</ul>
</html>
/*css*/
.where_you_are__where_you_are__hidden_text{
text-indent: -9999px;
}
여기서 text-indent가 먹히지 않는 문제가 발생했다.
원인은 'inline태그에 text-indent가 적용이 안 된다'는 데에 있었다.
이에 대한 해결방법은 inline태그를 block태그로 바꿔주거나, inline태그에 block속성(display: block 혹은 display:inline-block)을 부여해야 한다.
그러나 하위브라우저와의 호환성을 고려하고 있어서 display:block속성을 부여해서 문제를 해결했다.
해결후--
/*css*/
.where_you_are__where_you_are__hidden_text{
display:block;
text-indent: -9999px;
}
'css' 카테고리의 다른 글
| Grid (0) | 2020.08.28 |
|---|---|
| gnb hover 시에 하위 depth항목들 위치 조정 (0) | 2017.07.09 |