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 my CSS

.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

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 2

使自己成为一点栅格光栅图像，并将其用作背景图像。

Answer 3

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 4

I know this is an old question and already has an answer, but there is a CSS solution to this issue.

Using :before on the li , it's possible to have a » by using the hexadecimal code for it \\BB . Demo here.

HTML:

<ul>
    <li>List element 1</li>
    <li>List element 2</li>
    <li>List element 3</li>
    <li>List element 4</li>
</ul>

CSS:

ul
{
    list-style: none;
}

li:before
{
    content: '\BB  ';
}