Having a background without moving the letter's position - html

Question

I want to add a button background to the "a" without moving its position.
The table B is almost correct except that you move the "a" the right side.
I don't know how to do it.
You also need to take account to the I also need to change the size of the width in the future.
Thanks!
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>

Answer 1

Try to give negative left margin
#testtesttesttest {
width: 50px;
background-color: #F1F2F2;
-webkit-border-radius: 20px;
border-width: 1px;
border-color: #47a417;
text-decoration: none;
text-align: center;
padding: 1px 8px;
display: inline-block;
line-height: 21px;
color: white;
font-family: Helvetica,Arial,sans-serif;
margin-left:-30px;
}
#testtesttesttest:hover {
background-color: #3D8E14;
}
ul.aa, ul.bb
{
list-style-type: none;
}
Table A:
<ul class="aa">
<li>
<a href="#">
a
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>
<br/>
<br/>
Table B:
<ul class="bb">
<li>
<a href="#">
<span id="testtesttesttest">a</span>
</a>
</li>
<li>
<a href="#">
b
</a>
</li>
<li>
<a href="#">
c
</a>
</li>
<li>
<a href="#">
d
</a>
</li>
<li>
<a href="#">
e
</a>
</li>
</ul>

Answer 2

Setting the span to inline-block doesn't help so change that to inline. Then remove the 8px padding and you're done.

Answer 3

If you want the text to remain in the same place but also keep it centered inside the background, you could shift it back with a CSS transform (equal to width/2 - horizontal padding/2):
#testtesttesttest {
transform: translateX(calc(-50% + 4px));
}
Here's a JSFiddle to show the effect. Try changing around the width, and you'll see the text still stays in the same place. Hope this helps! Let me know if you have any questions.