Hide text of anchor tags when setting background image
I am using wordpress to generate a ul with anchor tags and I have separate classes for each element, I set a background image for each anchor tag with the following code
What I want to do is hide the text to anchor the list item while keeping the background image.
.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>
+3
source to share
2 answers
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;
}
+5
source to share