How can I remove letter-spacing for the last letter of an element in CSS?

Question

Here\'s the image in question of my HTML page. The text menu is inside a right aligned div, and has 1.2em letter spacing. Is there a pseudo-selector for this? I would not li

Answer 1

You cannot target the last character, only the first (CSS3, :first-letter). You can add a span around the last letter, but that would mean adding meaningless markup which is "worse" than adding positioning to the element.

CSS is perfect for trickery like this :)

Answer 2

No need for changing display to any other kind (<p> paragraph example) or actually doing anything unnecessary with my code. Text-indent set to negative letter-spacing value resolves that problem for me.

text-indent: -2em; works exactly as I want for letter-spacing: 2em; and was the only thing I had to add to my CSS.

Answer 3

Obviously a very old question, but CSS involved for your specific example worked at that time.

It involves to reset direction to the opposite, give a formating context to your inline element and set a negative text-indent equal to the letter spacing.

Demo below:

.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>

Answer 4

I would call this a browser bug, actually. The spec says it's the spacing between characters, while your browser (and mine) seem to be changing the spacing after characters. You should submit a bug report.

Answer 5

You can set your element to have a right margin of -1.2em, which would counteract the letter spacing.

e.g.

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

To answer your question regarding pseudo-selector, there isn't a per character pseudo-selector as far as I'm aware. (EDIT: Scratch that, there's the :First-Letter selector, which Jonas G. Drange pointed out).

EDIT: You can find a basic sample here: http://jsfiddle.net/teUxQ/

Answer 6

You could try adding display: block to the text and then reduce the width by using 100% minus the letter-spacing.

.menuheader {
 text-align: right;
 display: block; 
 letter-spacing: 1.1em; 
 width: calc(100% - 1.1em);
}