CODEWITHSUNDEEP
csswordpressmenuhide
Cool Guy Yo
Cool Guy Yo

Reputation: 6110

Hide a anchor tags text while setting a background image

I am using wordpress to generate a ul with anchor tags, and I have individual classes for each item, I am setting a background image for each anchor tag with the following code

What I am wanting to do is hide the text for the list item anchor, while still setting a background image for it.

.shop a {
    background-image:url('../images/shopFull.png');
    width:209px;
    height: 74px;
    display:block;
}

Here is the outputted html

<nav class="menu-main-navigation-container"><ul id="menu-main-navigation" class="nav-bar"><li id="menu-item-22" class="shop menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8888/goodMorningMoon/shop/">Shop</a></li>
<li id="menu-item-21" class="services menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost:8888/goodMorningMoon/services/">Services</a></li>
<li id="menu-item-23" class="blog menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8888/goodMorningMoon/blog/">blog</a></li>
<li id="menu-item-20" class="contact menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost:8888/goodMorningMoon/contact/">Contact</a></li>
</ul></nav>

Upvotes: 3

Views: 8756

Answers (2)

elclanrs
elclanrs

Reputation: 94101

The classical hack for this is:

a { text-indent: -9999px; }

The problem about this particular solution is not too good for SEO. If you want something more reliable you can use white text on white backgorund, or this other hack:

a { font-size: 0; }

Upvotes: 6

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

Use text-indent MDN docs and overflow:hidden.

shop a {
    background-image:url('../images/shopFull.png'); 
    width:209px; 
    height: 74px; 
    display:block;

    text-indent:-9999px;
    overflow:hidden;
}

Upvotes: 5

Related Questions