@Nik_1011

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

Здравствуйте.
Помогите,пожалуйста,решить данный вопрос, уже пересмотрел кучу ответов на 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".
  • Вопрос задан
  • 1768 просмотров
Решения вопроса 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Как сделать так,чтобы "border-bottom" не увеличивался при наличии "padding-left", а оставался строго в границах "p"?
Именно в такой постановке - никак. Но если заменить padding на margin, всё будет работать.
Ответ написан
Комментировать
@matios
Technical Team Lead
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;
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы