CSS скрыть <a> текст, не скрывая изображения

-1

У меня есть меню выбора языка, флаг + текст, для небольших устройств, я хочу, чтобы отобразить только flag.so Я хочу, чтобы не отображать «на английском языке» и «Deutsch»CSS скрыть <a> текст, не скрывая изображения

Сообщение 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); 
}

источник

2016-10-13 Anonymous

простой хак, сделать 'размер шрифта: 0;' под этим данным точку останова таргетинг 'dropdown' класс. –

@ DanielShillcock, я пробовал этот пост, не работал в моем случае. –

С текстом отступа:

a{ 

    text-indent: -999999px; 
}

я надеюсь, что это работает для вас

источник

2016-10-13 09:23:08 characterError

Спасибо, это работает, мне не нужен дисплей: блок, поэтому, пожалуйста, обновите свое решение. –

Это простое и умное решение –

Вы можете добавить поверочного элемент к тексту и скрыть его с помощью CSS для мобильных устройств, как так:

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

@media (max-width: 500px) { 
    .flagText{display:none;} 
} 
#en { 
    background-image: url(../images/flags/gb.png); 
} 
#de { 
    background-image: url(../images/flags/de.png); 
}

источник

2016-10-13 09:24:11 user2232273

Я не знаю, будет ли это возможно, в вашем случае, но что, если вы установите контент (метки языка) через 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/

источник

2016-10-13 09:37:12 lpg

CSS скрыть <a> текст, не скрывая изображения

ответ

Смежные вопросы