Почему такой эффект и как его исправить?

Question

[Анатолий]

Почему исчезает эффект "подчеркивания", когда слово становится крайним справа.
Пример:
https://codepen.io/workcode/pen/oNNNxwr



Upd. Вопрос все еще актуальный, если заменить after на before, то проблема возникает снова, если слово является крайним левым в строке.

Answer 1

[mahmudchon]

Замените :after на :before.
https://codepen.io/anton-marinin/pen/rNNNeZQ

Comments

[Митя ТоДаСё]

а зачем тут вообще :after или :before?

[mahmudchon]

Митя ТоДаСё, согласен с вами. Они тут только потому что вопрос звучал: "Почему...".

[Анатолий]

Митя ТоДаСё, чтобы регулировать отступ бордера.

[Анатолий]

mahmudchon, да, Ваш пример работает, но почему такое поведение у after? Ведь он должен работать или нет.
Логически: вначале идет стиль span, который задаете position:relative, а уже относительно его позиции размещается after.
В комментарии Вы пишите, что after и before можно не использовать? Т.е. можно регулировать отступ border без них?

[mahmudchon]

Анатолий, речь об этом - https://codepen.io/anton-marinin/pen/wvvvWJj

[Анатолий]

mahmudchon, ясно, но мне это не подходит, так как нужно регулировать отступ бордера от слова

А по логике не подскажите, почему before - верно, а after - нет?

Answer 2

[Митя ТоДаСё]

body {
  max-width: 700px;
  margin: auto;
  font-size: 20px;
  padding: 50px;
}
span {
  position: relative;
  color: green;
  border-bottom: 2px dashed green;
  bottom: -2px;
  left: 0;
  right: 0;
}

Comments

[Анатолий]

1. Не вижу ответа почему так происходит
2. Стиль after был создал, чтобы регулировать отступ border снизу, в вашем примере это не делается