CSS hide 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'

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 :

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);
}

simple hack, make the `font-size:0;` under that given breakpoint by targeting your `dropdown` class. — Deepak Yadav, Oct 13 '16 at 09:23

score 0 · Accepted Answer · edited Oct 13 '16 at 10:13

0

With the text-indent:

a{

    text-indent: -999999px;
}

i hope this works for you

edited Oct 13 '16 at 10:13

answered Oct 13 '16 at 09:23

characterError

68
11

Thank you, this works, I dont need the display: block, so please update your solution. – Oct 13 '16 at 09:32
That's simple and clever solution – Oct 13 '16 at 10:36

score 0 · Answer 2 · answered Oct 13 '16 at 09:24

You can add a span element to the text and hide it using css for mobile device like so:

<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);
}

score 0 · Answer 3 · answered Oct 13 '16 at 09:37

I don't know if it would be feasible in your case, but what if you set the content (language labels) through 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 demo here: https://jsfiddle.net/xkLra846/

CSS hide a text without hiding the image

3 Answers3