CSS - Div "background-text" вместо background-image

Question

Я хочу, чтобы у моего блока div была позиция "raquo" (») вдоль правого края блока div, внутри него, но не в части гиперссылки.

Мой блок div для гиперссылки, вот мой 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;
}

Что можно сделать?

Answer 1

Если вы пытаетесь создать меню, правильная разметка, которую вы должны использовать, это список, такой как этот

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

Теперь, чтобы реально заставить работать ». Есть два способа сделать это. Вы можете либо добавить дополнительный span с » внутри него и поместить его внутри привязки или списка, либо использовать псевдоэлемент CSS :after для создания контента для вас. Обратите внимание, что этот второй метод имеет меньшую поддержку браузера и может быть спорным. Взгляните на псевдоэлемент :after здесь: http://reference.sitepoint.com/css/pseudoelement-after

Взгляните на демонстрацию обоих методов в действии: http://jsfiddle.net/aQSVp/

Обратите внимание, как вы используете свойство content для генерации контента.

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

Answer 2

Сделайте себе небольшое растровое изображение и используйте его в качестве фонового изображения.

Answer 3

Я знаю, что это старый вопрос и уже есть ответ, но есть решение CSS для этой проблемы.

Используя :before на li, возможно иметь »используя шестнадцатеричный код для него \BB. Демонстрация здесь.

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  ';
}

Answer 4

Я не уверен на 100%, что понимаю, что вы хотите, с помощью background-text.Если вам просто нужна ссылка с >> перед, почему бы вам просто не сделать это внутри вашего div?

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

Возможно, добавьте "white-space: nowrap" к стилю span.*