Как контролировать длину border-bottom при наличии ::before и padding-left?

Question

[Nik_1011]

Здравствуйте.
Помогите,пожалуйста,решить данный вопрос, уже пересмотрел кучу ответов на stackoverflow, но так и не нашёл.

Задача:
Сделать тег "p" с "border-bottom" и псевдоэлементом "::before". Добавляя "padding-left" к "p", увеличивается и "border-bottom", даже при наличии "display inline-block" у "p".

Образец на Jsfiddle

Вопрос:
Как сделать так,чтобы "border-bottom" не увеличивался при наличии "padding-left", а оставался строго в границах "p"? Интересует именно "border-bottom", а не "box-shadow" или "text-decoration:underline".

Answer 1

[Алексей Уколов]

Как сделать так,чтобы "border-bottom" не увеличивался при наличии "padding-left", а оставался строго в границах "p"?

Именно в такой постановке - никак. Но если заменить padding на margin, всё будет работать.

Answer 2

[Макс]

p {
 display: inline-block;
 border-bottom: 1px solid #000;
 position: relative;
 margin-left: 30px
}

p::before {
  content: '123';
  position: absolute;
  left: -30px
}

https://jsfiddle.net/tojuwh1y/

Вариант №2 без абсолютного позиционирования:

p {
 display: inline-block;
 border-bottom: 1px solid #000;
 margin-left: 30px;
}

p::before {
  content: '123';
  margin-left: -30px;
}