Как дать padding, но чтобы border-bottom не двигался?

Question

Как дать padding элементу item, но чтобы border-bottom не двигался внутрь? Без костылей и псевдоэлементов, можно это сделать и как? Hover работает правильно, занимая весь блок, а вот border-bottom для item-info не хочет занимать весь блок.

Должно быть вот так как на пункте "Избранные сообщения":

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.list {
  background-color: green;
}

.item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 15px;
}

.item:hover {
  background-color: rgb(0 0 0 / 30%);
}

.icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: red;
}

.item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  gap: 25px;
  width: 100%;
  border-bottom: 2px solid #000;
}

.item-details {
  display: flex;
  align-items: center;
  gap: 5px;
}

<ul class="list">
  <li class="item">
    <div class="icon">
      <span></span>
    </div>
    <div class="item-info">
      <div class="item-name">Text</div>
      <div class="item-details">
        <span class="item-details__name">Details</span>
        <div class="icon">
          <span></span>
        </div>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="icon">
      <span></span>
    </div>
    <div class="item-info">
      <div class="item-name">Text</div>
      <div class="item-details">
        <span class="item-details__name">Details</span>
        <div class="icon">
          <span></span>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

С картинкой гораздо понятнее. Просто уберите правый padding у обертки .item и дайте его контенту .item-info.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

.list {
  background-color: green;
}

.item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 0 0 15px;
}

.item:hover {
  background-color: rgb(0 0 0 / 30%);
}

.icon {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: red;
}

.item-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  gap: 25px;
  width: 100%;
  border-bottom: 2px solid #000;

  padding-right: 15px;
}

.item-details {
  display: flex;
  align-items: center;
  gap: 5px;
}

<ul class="list">
  <li class="item">
    <div class="icon">
      <span></span>
    </div>
    <div class="item-info">
      <div class="item-name">Text</div>
      <div class="item-details">
        <span class="item-details__name">Details</span>
        <div class="icon">
          <span></span>
        </div>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="icon">
      <span></span>
    </div>
    <div class="item-info">
      <div class="item-name">Text</div>
      <div class="item-details">
        <span class="item-details__name">Details</span>
        <div class="icon">
          <span></span>
        </div>
      </div>
    </div>
  </li>
</ul>

БЛОГ НА HUSL

Как дать padding, но чтобы border-bottom не двигался?

Ответы (1 шт):