How to Remove Letter-Spacing for the Last Letter of an Element in CSS

How can I remove letter-spacing for the last letter of an element in 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/

How can I remove the letter-spacing on the last letter of an a tag in CSS?

You could wrap the entire text part of the link in a span and use the margin-right: -10px technique to get this done.

body {

  background-color: #1E1E96;

}

a {

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  color: #FFF;

  text-decoration: none;

  font-size: 12px;

}

.btn-wrapper {

  text-align: center;

  margin: 100px auto;

}

.btn-wrapper a {

  text-transform: uppercase;

  text-align: center;

  letter-spacing: 10px;

  padding: 15px 40px;

  border: solid 2px #FFF;

}

.btn-wrapper a span {

  margin-right: -10px;

}

<body>

  <div class="btn-wrapper">

    <a href="#"><span>Change Colour</span></a>

  </div>

</body>

How to remove letter-spacing for the last letter of an input field with CSS?

The width of #partitioned is too small, and is causing the input field to scroll horizontally to accommodate the last digit. Change the width to width: 220px; and this will fix it:

https://jsfiddle.net/yx1guj3s/

CSS — Negate additional space added to last letter by letter-spacing property

The issue does indeed stem from using letter-spacing. According to the standard, when you increase the letter spacing the layout engine considers that extra space after the letter to be part of the letter's width. So that extra space you see on the right is, in a way, what you asked for.

What it seems you want is for the letter spacing to put the actual letter in the middle, and surround each letter on both sides with letter-spacing/2. But I'm not sure that's a feature of CSS. In fact, the letter spacing algorithms are user agent-dependent, so this may even work in different ways on different browsers.

So you're left with ways to hack around this problem, like adding a -1em right margin/padding, but probably without a "true" solution.

How to achieve the last letter without letter-spacing in a text input field?

What about adding a padding-left of 1em?

<input type="text" style="letter-spacing:1em; text-align:center; padding-left: 1em" maxlength="6" id="code" name="code" />

Here is an example, with the maxlength removed and a width added, so you can see that it is centered properly:

http://jsfiddle.net/Jgm42/

Note: This looks to only be an issue with some browsers. IE, shockingly, seems to correctly leave off the extra spacing unless there is an adjacent character. You might have to do some browser-specific code.

How to remove the space between words CSS

Your problem is because you're adding multiple spaces together, but without in an inline text element, only one space will render. This is due to white space collapse. This is causing the space to render at the first letter-spacing, which is big at the start, and smaller at the end. Adjust your spacing accordingly and it should work, e.g. start each section with a space, instead of adding one at the start and end.

Depending on the font rendering's actual size, you may still end up with some sub-pixel irregularity, but unless you want to remove all the spacing and add some margin to the <strong> tags, this is probably a decent starting point.

.sub-lead {
    text-align: justify;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

strong {
    letter-spacing: 3px;
}

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700;800&display=swap" rel="stylesheet">
<div class="sub-lead">
    <strong>THE</strong> 8 5 2<strong> EXPERIENCE</strong> 9 0<strong> YOU</strong> 0 8 5<strong> ARE</strong>
</div>