Add character before regular link text in hover state

wondering if it’s possible to add a character right before whatever the link text is on a hover state

for example,

regular link state:
“Test Link”

hover link state:
» Test Link”

is there a simple way to do this without interfering too much with bullets and li/ul stuff? also if it’s possible to do it with that I would appreciate the code for that as well.

thanks!

Only available in the “true” (read: non-IE) browsers…


 a:before {content: » }
 

I believe…

are you sure that’s correct? It doesn’t seem like it would do anything and i just tried it and didn’t see anything?

perhaps i’m just finding the only possible way to use it incorrectly.

any ideas?

Hi,

You could do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
span {visibility:hidden}
a {color:red;text-decoration:none;}
a:hover {color:blue;}
a:hover span {visibility:visible}
</style>
</head>
<body>
<p><a href="#"><span>&raquo; </span> This is a link</a></p>
</body>
</html>

Paul

and is it possible to do something like that on a hover state? i realize css add’s style, not content, however i’m sure there’s a way to do this…

whoops, didn’t see that reply. i’ll try it out.

when i use the span {visibility:hidden a lot of text on my site becomes invisible because they use the span element as well for classes.

what else can i use?

Just give it a specific class lol :wink:

<span class=“something”>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
span.hide{visibility:hidden}
a {color:red;text-decoration:none;}
a:hover {color:blue;}
a:hover span.hide {visibility:visible}
</style>
</head>
<body>
<p><a href="#"><span class="hide">&raquo; </span> This is a link</a></p>
</body>
</html>


heh, i had completely forgotten about that.

ok, here’s what i have so far:
for the styles…


.menu .options {
background-color: #666666;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
.menu a:link, .menu a:active, .menu a:visited {
display:block;
text-decoration:none;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-bottom-color: #000000;
font-size: 11px;
color: #FFFFFF;
padding: 5px;
}
.menu a:hover {
background-color: #000000;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
text-decoration: underline;
color: #FFFF00;
}
span.hide {visibility:hidden}
.menu a:hover span.hide {
text-decoration: none;
font-family: verdana, tahoma, sans-serif;
font-size: 8pt;
font-weight: bold;
color:#CCFF00;
visibility:visible;
}

and for the xhtml…


<div id="menu1Container">
<div id="menu1Content" class="menu">
<div class="options">
			 <a href="link.php"><span class="hide">&raquo; </span>Link 1</a>
			 <a href="link.php"><span class="hide">&raquo; </span>Link 2</a>
			 <a href="link.php"><span class="hide">&raquo; </span>Link 3</a>
			 <a href="link.php"><span class="hide">&raquo; </span>Link 4</a>
			 <a href="link.php"><span class="hide">&raquo; </span>Link 5</a>
		 </div>
</div>
	</div>

how can i have yellow text with a white underline on hover state? (and the underline is only under the text, not the » as well)

Hi,

You can do it for ie but not for mozilla.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.menu .options {
background-color: #666666;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #000000;
border-left-color: #000000;
}
.menu a:link, .menu a:active, .menu a:visited {
display:block;
text-decoration:none;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #999999;
border-bottom-color: #000000;
font-size: 11px;
color: yellow;
padding: 5px;
}
.menu a:hover {
background-color: #000000;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
text-decoration: underline;
color: #FFFF00;
}
span.hide {visibility:hidden}
.menu a:hover span.hide {
text-decoration: none;
font-family: verdana, tahoma, sans-serif;
font-size: 8pt;
font-weight: bold;
color:#CCFF00;
visibility:visible;
}
.link {color:#fff}
</style>
</head>
<body>
<div id="menu1Container">
 <div id="menu1Content" class="menu">
  <div class="options">
	<a href="link.php"><span class="hide">&raquo; </span><span class="link">Link 1</span></a>
	<a href="link.php"><span class="hide">&raquo; </span><span class="link">Link 2</span></a>
	<a href="link.php"><span class="hide">&raquo; </span><span class="link">Link 3</span></a>
	<a href="link.php"><span class="hide">&raquo; </span><span class="link">Link 4</span></a>
	<a href="link.php"><span class="hide">&raquo; </span><span class="link">Link 5</span></a>
   </div>
 </div>
</div>
</body>
</html>

Paul

that looks great! thanks for everything, Paul. you’ve been more than helpful!

Anyone know of a solution to this for IE? Or a similar effect where a hover will make a bullet or image visible and invisible on rollout?

These are the methods I’ve tried so far:
#subnav ul {
padding:0px;
margin:0px;
list-style-image : url(…/images/util/no.arrow.gif);
}
#subnav li {
padding:4px;
margin:0px;
border-top:1px solid #fff;
background-color:#efeeef;
}
#subnav li a:link {
color:#000;
text-decoration:none;
padding-left:10px;
list-style-image : url(…/images/util/no.arrow.gif);
}
#subnav li a:hover {
color:#E55839;
text-decoration:underline;
padding-left:10px;
list-style-image : url(…/images/util/orange.arrow.gif);
}

The above does nothing in IE or Firefox, but the following works in Firefox but not IE

#subnav li a img {
visibility:hidden;
border:0px;}
#subnav li a:hover img {
visibility:visible;
border:0px;}

Hi,

Do you mean something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0}
div {
 margin:50px;
 border:1px solid #000;
 width:200px;
}
ul{
 margin-left:18px;
}
li,a{
 height:1.5em;
 line-height:1.5em;
}
a{
 display:block;
 text-decoration:none;
 background:#fff;
 position:relative;
 left:-18px;
 padding-left:18px;
 text-decoration:none
}
a:hover {background:transparent}
</style>
</head>
<body>
<div> 
  <ul>
	<li><a href="#">Some text</a></li>
	<li><a href="#">Some text</a></li>
	<li><a href="#">Some text</a></li>
	<li><a href="#">Some text</a></li>
	<li><a href="#">Some text</a></li>
  </ul>
</div>
</body>
</html>

Alternatively you can just do a imple rollover on the anchor and show (or hide) an image as usual.

Your second example will work in ie but you need to change something on a:hover otherwise ie doesn’t do anything (another bug). Just change the background colr slightly or set border:transparent and it will start working.


#subnav li a:hover{background:#fffffe}

Ah, excellent Paul, I set the border to transparent and that worked. You have any idea why it requires making something change like that to get it to work? Also there is one problem. If FireFox it works perfectly with the text remaining stationary and the bullet appearing and disappearing but in IE it shifts the text to the right to make room for the img. Any hack to overcome that?
This is my CSS

#subnav {
width:212px;
padding:4px;
margin:0px;
border-top:2px solid #999;
}
#subnav ul {
padding:0px;
margin:0px;
}
#subnav li {
padding:4px;
margin:0px;
border-top:1px solid #fff;
background-color:#efeeef;
}
#subnav li a:link {
color:#000;
text-decoration:none;
padding-left:10px;
}
#subnav li a:hover {
color:#E55839;
text-decoration:underline;
padding-left:10px;
}
#subnav li a img {
visibility:hidden;
border:0px;}
#subnav li a:hover img {
visibility:visible;
border:transparent;
border:0px;}

And my HTML

<div id=“subnav”>
<ul>
<li><a href=“#”><img src=“…/images/util/orange.arrow.gif” valign=“bottom” /> test 3</a></li>
</ul>
</div>

It shouldn’t make the text jump and it doesn’t when I try it locally with another image. The image is always there its just not visible so there should be no displacement on hover unless you are changing some other property such as padding/borders or something.

I couldn’t see any problems except the border:transparent should be on a:hover and not the a:hover img.

Sketch was close with a solution for CSS2 browsers:

a:hover:before {content:"\\BB"}

(You forgot the :hover pseudo-class, and you can’t use SGML character entities in CSS. \BB is the CSS equivalent of &#xBB; = &#187; = &raquo;.)

Ah, once I took out the padding-left:10px from the #subnav li a:hover and #subnav li a:link it quit shifting on me

Thanks again Paul, as always a tremendous help.

One more question… is there a way to keep the text from wrapping back under the graphic? I’d like the wrapping text to align with the top text, not the graphic. It looks silly when the graphic is invisible. Thanks