stop :before 和元素重叠

Question

我有一个 css 类，它附加了一个伪 :before 类。 :before 类只是一个边框，但它与文本重叠。我试过填充，但它仍然重叠。这是css代码

 .chevron {
        width: auto;
        min-width: 100px;
        position: relative;
        background: #d1dce6;
        text-overflow: ellipsis;
        height: 40px;
        max-height: 40px;
    }
    .chevron:before  {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;

        border-left: 20px solid white;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }

如何在白色边框 (:before) 和文本之间留出一些空间

编辑 1：将 css 类应用于元素。向左填充不起作用。

 <th class="chevron" v-for="p in joinTo">{{p.description.trunc(30)}}</th>

Answer 1

只需在父元素中添加一些填充：

.chevron {
    width: auto;
    min-width: 100px;
    position: relative;
    background: #d1dce6;
    text-overflow: ellipsis;
    height: 40px;
    max-height: 40px;
    /* Add this line: */
    padding-left: 50px;
}

提示：由于您已经拥有left: 0，因此您无需担心左对齐问题。

此外，正如 cmets 中所指出的，如果您不希望整体尺寸因填充而增加，您可以使用两者之一：

padding-left: 50px;
box-sizing: border-box;

text-indent: 50px;

Answer 2

您需要为父元素添加填充

 .chevron {
        width: auto;
        min-width: 100px;
        position: relative;
        background: #d1dce6;
        text-overflow: ellipsis;
        height: 40px;
        max-height: 40px;
        padding-left: 40px;
    }
    .chevron:before  {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;

        border-left: 20px solid white;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }

<table>
  <thead>
      <tr>
          <th class="chevron">sdsdsd</th>
          <th class="chevron">sdsdsd</th>
          <th class="chevron">sdsdsd</th>
          <th class="chevron">sdsdsd</th>
          <th class="chevron">sdsdsd</th>
      </tr>
  </thead>
</table>