Заполнение: перед псевдоэлементом

Question

Я пытаюсь стилизовать некоторые ссылки с помощью линий под псевдоэлементом: before. У элемента link есть некоторые отступы, которые я не могу изменить. Я установил позицию before для абсолюта, чтобы показать линию, но, как я понимаю, это означает, что отступ ссылки считается частью ширины элемента: before. Я пытался использовать box-sizing: content-box;, но пробел по-прежнему включается.

Я пытаюсь добиться, чтобы строка только go доходила до текста ссылки, а не до пробела.

HTML:

<div>
  <a href="">heya</a>
  <a href="">what's up?</a>
</div>

CSS:

a{
  text-decoration: none;
  color: black;
  position: relative;
  padding: 1em;
}
a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  background-color: #000;
}

jsfiddle

Спасибо

Answer 1

Сделайте это с фоном, и вы получите лучший контроль:

a {
  text-decoration: none;
  color: black;
  padding: 1em;
  background:
    linear-gradient(#000,#000) 
    bottom -0.5em center /* position */
    /100% 2px /*width height */
    no-repeat;
  background-origin:content-box; /* this will consider only the content and not the padding */
}

<div>
  <a href="">heya</a>
  <a href="">what's up?</a>
</div>

Answer 2

Вы можете использовать свойства left и right (соответствующие x -элементу своего якоря) и удалить width:

a {
    text-decoration: none;
    color: black;
    position: relative;
    padding: 1em;
}

a::before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: 0;
    background-color: #000;
    left: 1rem;
    right: 1rem;
}

<div>
    <a href="">heya</a>
    <a href="">what's up?</a>
</div>

Answer 3

используйте css calc как: width: calc(100% - 2em);

, вот скрипка: https://jsfiddle.net/hellooutlook/krgLeq6h/1/