Answer was answered before OP added the line
Any solution involving background-image
would require me to specify
each item's width
and height
in the style sheet, which I would like to
avoid for the purposes of this question.
So if anyone interested in background-image
solution can refer this, else can simply skip.
Am not sure how optimum solution I am suggesting is, but surely you can use background-image
for each a
element, using nth-
pseudo, and set the fonts color
to transparent, or use text-indent
property with overflow: hidden;
So it will be something like
nav ul li {
display: inline-block;
}
nav ul li:nth-of-type(1) a {
background-image: url(#);
display: block;
width: /* Whatever */ ;
color: transparent;
text-indent: -9999px; /* Optional */
overflow: hidden;
font-size: 0; /* Optional, some people are really sarcastic for this */
/* Below properties will be applicable if you are going for sprite methods */
background-position: /* Depends */ ;
background-size: /* If required */ ;
}
The reason why I would suggest you is :-
Advantages :
- Cross browser compatible
- Can you sprite methods to cut down http requests to request image for each tab
- Also, you are not losing the text which is between the
a
tags, which is really good as far as screen readers are concerned.
Disadvantages :
- Set custom
width
for each
Note: If you are going for a sprite solution, than background-position
is anyways a must property to be used, so be sure you check out the support table first, before opting the sprite method.
Credits - For support table