Duyen Ho Duyen Ho - 6 months ago 152
CSS Question

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

I'm a newbie.

I'm trying to remove the letter-spacing on the last letter for an a tag I styled into a button and centred on the page.



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

<body>

<div class="btn-wrapper">
<a href="#">Change Colour</a>
</div>

</body>





I tried

.btn-wrapper a {
margin-right: -10px;
}


and

.btn-wrapper a {
text-indent: 10px;
}


with no joy.

I am loath to put a span on the last letter.

The above suggestions I found on Stack Overflow.

Can someone please explain what's going on with my code and help find a solution?

Thanks in advance.

Answer

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>