:: after псевдо использует ширину родительского элемента вместо ширины элемента для позиционирования в процентах

Question

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

<td>
   <a class="redTab">Tab 1</a>
   <a class="redTab">Tab 2</a>
   <a class="redTab">Tab 3</a>
   <a class="redTab">Tab 4</a>
   <a class="redTab">Tab 5</a>
   <a class="redTab">Tab 6</a>
</td>

.redTabActive::after{
    content: '';
    border: 15px solid transparent;
    border-top: 15px solid black;
    margin-left: -50%;
    margin-top: 25px;
    vertical-align: bottom;
    overflow: visible;
    position: absolute;
}

У меня есть некоторый JavaScript, который меняет класс с RedTabRedTabActive, когда вы нажимаете на него.Именно здесь я ожидал, что нижний карат будет располагаться в середине вкладки, но он отображается за пределами экрана для большинства вкладок.

Answer 1

один возможный пример из моего комментария 'ожидал своего рода обратная связь), поэтому позиция должна начинаться с, затем вы можете выбрать поле, преобразовать и / или координаты.

.redTab::after {
  content: "";
  border: 15px solid transparent;
  border-top: 15px solid black;
  display: table;/* or any block level display or use top:xx; */
  border-collapse: collapse;/* if table display*/
  left: 50%;
  margin-left: -15px;
  position: absolute;
}
a {
  position: relative;/* i'm your father ! */
  display: inline-block;
  border: solid;/* see me */
}

<table>
  <tr>
    <td>
      <a class="redTab">Tab 1</a>
      <a class="redTab">Tab 2</a>
      <a class="redTab">Tab 3</a>
      <a class="redTab">Tab 4</a>
      <a class="redTab">Tab 5</a>
      <a class="redTab">Tab 6 last one</a>
    </td>
  </tr>
</table>

или

.redTab::after {
  content: "";
  border: 15px solid transparent;
  border-top: 15px solid black;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  position: absolute;
}

a {
  position: relative; /* i'm your father ! */
  display: inline-block;
  border: solid;/* see me */
}

<table>
  <tr>
    <td>
      <a class="redTab">Tab 1</a>
      <a class="redTab">Tab 2</a>
      <a class="redTab">Tab 3</a>
      <a class="redTab">Tab 4</a>
      <a class="redTab">Tab 5</a>
      <a class="redTab">Tab 6 last one</a>
    </td>
  </tr>
</table>

или

.redTab::after {
  content: "";
  border: 15px solid transparent;
  border-top: 15px solid black;
  top: 100%;
  left: 50%;
  transform: translatex(-50%);
  position: absolute;
}

a {
  position: relative;
  /* i'm your father ! */
  display: inline-block;
  border: solid; /* see me */
}

<table>
  <tr>
    <td>
      <a class="redTab">Tab 1</a>
      <a class="redTab">Tab 2</a>
      <a class="redTab">Tab 3</a>
      <a class="redTab">Tab 4</a>
      <a class="redTab">Tab 5</a>
      <a class="redTab">Tab 6 last one</a>
    </td>
  </tr>
</table>

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