0

Suprisingly I couldn't find an answer to this one anywhere - I might be using the wrong words...?!

Is there a possiblity to hide the word "English" from the following snippet with pure css? In terms of a display:none, so is doesn't take up any space:

<li class="menu-item menu-item-language menu-item-language-current">
    <a href="#" onclick="return false">
        <img class="iclflag" src="/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png" width="18" height="12" alt="English" title="English" />
        English
    </a>
</li>

Thanks!

Improve this question
4
  • It's not clear to me what you are trying to do. There are many options to 'hide' text.
    – Paulie_D
    Commented Jan 27, 2015 at 15:33
  • If the text would be in a span, I'd like to set the span to display: none. But it's not in a span. I could of course select the link a, but I want the image to stay and just the text to disappear. I'm basically looking for the selector for selecting plain text - if that exists...
    – psteinweber
    Commented Jan 27, 2015 at 15:34
  • Do you mean hiding and then making visible via a user input?
    – Mayo
    Commented Jan 27, 2015 at 15:35
  • 1
    This question might help: stackoverflow.com/questions/471510/hide-text-using-css
    – Phate01
    Commented Jan 27, 2015 at 15:39

1 Answer 1

Reset to default
2

You could set the font-size to zero.

a {
    font-size:0;
}
   <a href="#" onclick="return false">
        <img class="iclflag" src="http://lorempixel.com/output/people-q-c-18-12-10.jpg" width="18" height="12" alt="English" title="English" />
        English
    </a>

Improve this answer
2
  • 1
    Wouldn't it still take space in the DOM?
    – Mayo
    Commented Jan 27, 2015 at 15:36
  • What do you mean by "space" in the DOM? No page screen space but would it still be readable by screen readers...yep, absolutely.
    – Paulie_D
    Commented Jan 27, 2015 at 15:40

Not the answer you're looking for? Browse other questions tagged or ask your own question.