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 like to have to resort to relative positioning.

I would love the text menu to end where the block ends.

I've already marked a best answer, but I was asked for the markup regardless by CodeBlock. Here it is.

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

Answer 1

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/