Как удалить интервал между буквами для последней буквы элемента в CSS?

Вот изображение, о котором идет речь в моей HTML-странице. Текстовое меню находится внутри выровненного справа div и имеет 1,2-кратное расстояние между буквами. Для этого существует псевдоселектор? Я бы не хотел прибегать к относительному позиционированию.

Мне бы хотелось, чтобы текстовое меню заканчивалось там, где заканчивается блок.

Я уже отметил лучший ответ, но меня попросили разметку вне зависимости от CodeBlock. Вот оно.

<div class="sidebar">
        <span class="menuheader">MENU</span>
        <ul>
        <li><a href="#content">Content</a></li>
        <li><a href="#attachments">Attachments</a></li>
        <li><a href="#subpages">Sub-pages</a></li>
        <li><a href="#newsubpage">New sub-page</a></li>
        </a></ul>
</div>

.sidebar{
color: rgb(150,93,101);
display: inline;
line-height: 1.3em;
position: absolute;
top: 138px;
width: 218px;
}

.menuheader{
letter-spacing: 1.1em;
margin: -1.2em;
text-align: right;
}

Ответ 1

Вы можете установить для своего элемента правый край -1.2em, который будет противодействовать расстоянию между буквами.

например.

.menu-header-selector {
  display:block;
  letter-spacing:1.2em;
  margin-right:-1.2em;
  text-align:right;
}

Чтобы ответить на ваш вопрос относительно псевдоселектора, насколько я знаю, на псевдо-селектор для каждого символа нет. (EDIT: поцарапайте, что есть селектор :First-Letter, который указал Джонас Дж. Ранг).

EDIT: здесь вы можете найти базовый пример: http://jsfiddle.net/teUxQ/

Ответ 2

Я бы назвал это ошибкой браузера. spec говорит, что это пробел между символами, в то время как ваш браузер (и мой), кажется, меняет интервал после символов. Вы должны представить отчет об ошибке.

Ответ 3

Вы не можете настроить таргетинг на последний символ, только первый (CSS3,: first-letter). Вы можете добавить пролет вокруг последней буквы, но это означало бы добавление бессмысленной разметки, которая "хуже", чем добавление позиционирования к элементу.

CSS отлично подходит для обмана:)

Ответ 4

Очевидно, это очень старый вопрос, но CSS для вашего конкретного примера работал в то время.

Это предполагает изменение направления на противоположное, предоставление форматирующего контекста для встроенного элемента и установку отрицательного отступа текста, равного межбуквенному интервалу.

Демонстрация ниже:

.sidebar {
  color: rgb(150, 93, 101);
  line-height: 1.3em;
  width: 218px;
  border:solid;
  text-align:right;
}

.menuheader {
  letter-spacing: 1.1em;
  direction:rtl;
  display:inline-block;
  text-indent:-1.1em;
  background:gold
}

<div class="sidebar">
  <span class="menuheader">MENU</span>
  <ul>
    <li><a href="#content">Content</a></li>
    <li><a href="#attachments">Attachments</a></li>
    <li><a href="#subpages">Sub-pages</a></li>
    <li><a href="#newsubpage">New sub-page</a></li>
  </ul>
</div>