How can I remove letter-spacing for the last letter of an element in CSS?
CssCss SelectorsLetter SpacingCss Problem Overview
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 the 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;
}
Css Solutions
Solution 1 - Css
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/
Solution 2 - Css
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.
Solution 3 - Css
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>
Solution 4 - Css
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 :)
Solution 5 - Css
You can add an :after of your element and set a minus margin left equal as the letter-spacing
.menuheader {
letter-spacing: 1.1em;
}
.menuheader:after {
content:" ";
margin-left: -1.1em;
}
Tested on Chrome, Firefox and Edge
Solution 6 - Css
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.
Solution 7 - Css
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);
}
Solution 8 - Css
I think i have the best answer
You can use ::after and set content as the last word of your word
div{
display:inline-block;}
#demo1{border: 2px blue dashed;
text-align: center;
letter-spacing: 3vw;
}
#demo2{border: 2px blue dashed;
text-align: center;
letter-spacing: 3vw;}
#demo2::after{
content:'g';
letter-spacing:0;}
<div id="demo1">something</div><span> ///here after last letter their is a gap</span></br> </br>
<div id="demo2">somethin</div> <span>///here the gap is removed with the help of ::after sudeo class</span>