Могу ли я установить состояние :: after строки таблицы относительно его нормального состояния?

Question

Я пытаюсь создать нижнюю границу градиента для разделения строк таблицы.

Я использую состояние :: after строки таблицы для создания границы и пытаюсь использовать position: absolute для поместите его внизу ряда. Я думаю, проблема в том, что состояние :: after строки таблицы видит элемент таблицы как ближайшего родителя с определенной позицией, а не нормальное состояние строки таблицы. Я дал позицию строки таблицы: относительно, чтобы попытаться установить состояние :: after в положение относительно строки, но безрезультатно.

Есть ли способ получить состояние :: after для положение внизу каждой строки, а не внизу всей таблицы?

.beat-store {
  position: relative;
  display: table;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border-radius: 8px;
}

.beat-store__song {
  display: table-row;
  position: relative;
  height: 6rem;
}

.beat-store__song:not(:last-child)::after {
  content: "";
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100% - 6rem);
  height: 1px;
  background-image: linear-gradient( to right, rgba(204, 204, 204, 0), #cccccc, rgba(204, 204, 204, 0));
  z-index: 10;
}

<table class="beat-store">
  <tr class="beat-store__song">
    <td class="beat-store__table-cell beat-store__album-art-box">
      <img src="assets/images/photos/me.JPG" alt="album art" class="beat-store__album-art">
    </td>
    <td class="beat-store__table-cell beat-store__song-details">
      <p class="beat-store__song-name">Antarctica</p>
      <p class="beat-store__song-genre">Hip Hop</p>
    </td>
    <td class="beat-store__table-cell beat-store__song-bpm">120</td>
    <td class="beat-store__table-cell beat-store__song-time">3:04</td>
    <td class="beat-store__table-cell beat-store__actions">
      <div class="beat-store__actions-group">
        <img src="assets/icons/favorite--unchecked.svg" alt="favourite" class="favourite-icon">
        <img src="assets/icons/share-dark.svg" alt="share" class="share-icon">
        <a href="#" class="btn--add-to-cart">
          <i class="cart-icon"></i>
          <p>Add to Cart</p>
        </a>
      </div>
    </td>
  </tr>
  <tr class="beat-store__song">
    <td class="beat-store__table-cell beat-store__album-art-box">
      <img src="assets/images/photos/me.JPG" alt="album art" class="beat-store__album-art">
    </td>
    <td class="beat-store__table-cell beat-store__song-details">
      <p class="beat-store__song-name">Antarctica</p>
      <p class="beat-store__song-genre">Hip Hop</p>
    </td>
    <td class="beat-store__table-cell beat-store__song-bpm">120</td>
    <td class="beat-store__table-cell beat-store__song-time">3:04</td>
    <td class="beat-store__table-cell beat-store__actions">
      <div class="beat-store__actions-group">
        <img src="assets/icons/favorite--unchecked.svg" alt="favourite" class="favourite-icon">
        <img src="assets/icons/share-dark.svg" alt="share" class="share-icon">
        <a href="#" class="btn--add-to-cart">
          <i class="cart-icon"></i>
          <p>Add to Cart</p>
        </a>
      </div>
    </td>
  </tr>
  <tr class="beat-store__song">
    <td class="beat-store__table-cell beat-store__album-art-box">
      <img src="assets/images/photos/me.JPG" alt="album art" class="beat-store__album-art">
    </td>
    <td class="beat-store__table-cell beat-store__song-details">
      <p class="beat-store__song-name">Antarctica</p>
      <p class="beat-store__song-genre">Hip Hop</p>
    </td>
    <td class="beat-store__table-cell beat-store__song-bpm">120</td>
    <td class="beat-store__table-cell beat-store__song-time">3:04</td>
    <td class="beat-store__table-cell beat-store__actions">
      <div class="beat-store__actions-group">
        <img src="assets/icons/favorite--unchecked.svg" alt="favourite" class="favourite-icon">
        <img src="assets/icons/share-dark.svg" alt="share" class="share-icon">
        <a href="#" class="btn--add-to-cart">
          <i class="cart-icon"></i>
          <p>Add to Cart</p>
        </a>
      </div>
    </td>
  </tr>
  <table>

Любая помощь по моей проблеме или совет по таблицам (я не часто с ними работаю) будут очень признательны!

Спасибо, Брайан

Answer 1

Это может дать вам то, что вы ищете. Я удалил псевдоэлемент :: after, потому что не верю, что используемый вами метод подходит для этой задачи. Возможно, вам придется нанести дополнительную укладку на .beat-store__song для достижения желаемых результатов. Трудно предсказать, когда используются заполнители для изображений.

Я думаю, что вам не хватало того, что использование ::after предназначено для вставки некоторого содержимого после элемента, и применяется любой стиль, указанный в псевдоэлементе ::after только к добавленному контенту. В вашем случае добавленное содержимое было пустым.

.beat-store {
  position: relative;
  display: table;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  border-radius: 8px;
}

.beat-store__song {
  display: table-row;
  position: relative;
  height: 6rem;
}

.beat-store__song:not(:last-child) {
  background-image: linear-gradient( to right, rgba(204, 204, 204, 0), #cccccc, rgba(204, 204, 204, 0));
  background-repeat: no-repeat;
  background-position: bottom; 
  background-size:calc(100% - 6rem) 1px;
  
}

<table class="beat-store">
  <tr class="beat-store__song">
    <td class="beat-store__table-cell beat-store__album-art-box">
      <img src="assets/images/photos/me.JPG" alt="album art" class="beat-store__album-art">
    </td>
    <td class="beat-store__table-cell beat-store__song-details">
      <p class="beat-store__song-name">Antarctica</p>
      <p class="beat-store__song-genre">Hip Hop</p>
    </td>
    <td class="beat-store__table-cell beat-store__song-bpm">120</td>
    <td class="beat-store__table-cell beat-store__song-time">3:04</td>
    <td class="beat-store__table-cell beat-store__actions">
      <div class="beat-store__actions-group">
        <img src="assets/icons/favorite--unchecked.svg" alt="favourite" class="favourite-icon">
        <img src="assets/icons/share-dark.svg" alt="share" class="share-icon">
        <a href="#" class="btn--add-to-cart">
          <i class="cart-icon"></i>
          <p>Add to Cart</p>
        </a>
      </div>
    </td>
  </tr>
  <tr class="beat-store__song">
    <td class="beat-store__table-cell beat-store__album-art-box">
      <img src="assets/images/photos/me.JPG" alt="album art" class="beat-store__album-art">
    </td>
    <td class="beat-store__table-cell beat-store__song-details">
      <p class="beat-store__song-name">Antarctica</p>
      <p class="beat-store__song-genre">Hip Hop</p>
    </td>
    <td class="beat-store__table-cell beat-store__song-bpm">120</td>
    <td class="beat-store__table-cell beat-store__song-time">3:04</td>
    <td class="beat-store__table-cell beat-store__actions">
      <div class="beat-store__actions-group">
        <img src="assets/icons/favorite--unchecked.svg" alt="favourite" class="favourite-icon">
        <img src="assets/icons/share-dark.svg" alt="share" class="share-icon">
        <a href="#" class="btn--add-to-cart">
          <i class="cart-icon"></i>
          <p>Add to Cart</p>
        </a>
      </div>
    </td>
  </tr>
  <tr class="beat-store__song">
    <td class="beat-store__table-cell beat-store__album-art-box">
      <img src="assets/images/photos/me.JPG" alt="album art" class="beat-store__album-art">
    </td>
    <td class="beat-store__table-cell beat-store__song-details">
      <p class="beat-store__song-name">Antarctica</p>
      <p class="beat-store__song-genre">Hip Hop</p>
    </td>
    <td class="beat-store__table-cell beat-store__song-bpm">120</td>
    <td class="beat-store__table-cell beat-store__song-time">3:04</td>
    <td class="beat-store__table-cell beat-store__actions">
      <div class="beat-store__actions-group">
        <img src="assets/icons/favorite--unchecked.svg" alt="favourite" class="favourite-icon">
        <img src="assets/icons/share-dark.svg" alt="share" class="share-icon">
        <a href="#" class="btn--add-to-cart">
          <i class="cart-icon"></i>
          <p>Add to Cart</p>
        </a>
      </div>
    </td>
  </tr>
  <table>