CSS - Div "background-text" instead of background-image

Question

I want my div box to have a "raquo" (») position along the right edge of the div box, inside it, but not part of the hyperlink.

My div box is for a hyper link, here is example

.episode-nav .alignright a { margin-bottom:7px; margin-top:7px; width:274px; padding:5px 0px; background:#2A2A2A; text-align:center; border:1px solid #1B1B1B; float:right; }

What can be done ??

Answer 1

I'm not 100% sure I understand what you want with 'background-text'. If you simply want a link with a >> in front, why don't you just do this inside your div?

<span>&raquo;<a href="...">This is a link</a></span> 

Possibly add "white-space:nowrap" to the span's style.

Answer 2

If you are attempting to create a menu the correct markup you should use is a list, such as this

<ul id="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

Now, to actually get the » working. There are two ways of doing it. You can either add in an additional span with a » inside it, and place it inside the anchor or the list, or you could use the CSS :after pseudo-element to generate the content for you. Do note that this second method has less browser support and may be controversial. Have a look at the :after pseudo-element here: http://reference.sitepoint.com/css/pseudoelement-after

Have a look at a demo of both methods in action here: http://jsfiddle.net/aQSVp/

Notice how you use the content property to generate the content.

#after a:after {
    content: '»';
    float: right;
    margin-right: 10px;
}

Answer 3

Make yourself a little raquo raster image and use it as a background image.