user2997418 user2997418 - 1 month ago 4
HTML Question

CSS hide a <a> text without hiding the image

I have a language menu, flag+ text, for small devices I want to display only the flag.so I want to not display 'English' and 'Deutsch'

enter image description here

The post how do i hide anchor text without hiding the anchor didn't solve my problem, so it is not a duplicated post. If I try it I get this result :

enter image description here

The menu is based on

<a>
list:

<a id="en" class="current" href="...">
English
</a>
<ul class="dropdown" style="display: none;">
<li>
<a id="de" href="...">Deutsch</a>
</li>
</ul>


css :

@media (max-width: 500px) {

}
#en {
background-image: url(../images/flags/gb.png);
}
#de {
background-image: url(../images/flags/de.png);
}

Answer

With the text-indent:

a{

    text-indent: -999999px;
}

i hope this works for you