css
text-indent not working
J_estrella
2017. 6. 3. 00:04
<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;
}