Question

我有一个css类，它有一个伪：在附加到它之前的类。：类之前只是一个边框，但它与文本重叠。我试过填充但它仍然重叠。这是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;
    }

如何在白色边框（：之前）和文字

之间留出一些空间

编辑1：css类应用于元素。 Padding-left不起作用。

 <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，因此您无需担心左对齐问题。

此外，正如评论中所指出的，如果您不希望因填充而增加整体尺寸，则可以使用以下任意一种：

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

text-indent: 50px;

Answer 2

您需要为父元素添加填充

＆＃13;

 .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;
    }

＆＃13;

<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>

＆＃13;

Answer 3

你弄错了。

你有：

.chevron:before

如果你想使用Before伪，你需要有两个冒号

::before

我希望这会有所帮助。如果您需要更多信息，请查看W3schools中的文档：资料来源：https://www.w3schools.com/cssref/sel_before.asp

停止：之前和元素重叠

3 个答案: