CSS会隐藏<a> text without hiding the image

Question

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'

帖子how do i hide anchor text without hiding the anchor没有解决我的问题，所以它不是重复的帖子。如果我尝试它，我得到这个结果：

菜单基于<a>列表：

<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 1

使用text-indent：

a{

    text-indent: -999999px;
}

我希望这对你有用

Answer 2

您可以在文本中添加 span元素，并使用css为移动设备隐藏它，如下所示：

uint CheckSum=104396;

byte[] byteArray=BitConverter.GetBytes(CheckSum)

where BitConverter is System method

Answer 3

我不知道你的情况是否可行，但如果你通过css设置内容（语言标签）怎么办？

a{
  display:block;
  height:30px;
  padding-left:24px;
  background-repeat:no-repeat;
}

@media (max-width: 500px) {
 a:after{content: none !important;}
}
a#en {
    background-image: url(http://icons.iconarchive.com/icons/custom-icon-design/all-country-flag/24/United-Kingdom-flag-icon.png);
}
a#en:after{
   content: "English";
}
a#de {
    background-image: url(http://icons.iconarchive.com/icons/hopstarter/flag-borderless/24/Germany-icon.png);
}
a#de:after{
  content: "Deutsch";
}

<a id="en" class="current" href="..."></a>
<ul class="dropdown">
    <li>
        <a id="de" href="..."></a>
    </li>
</ul>

Jsfiddle演示：https://jsfiddle.net/xkLra846/