stop :before and element overlappting

Question

I have a css class that has a pseudo :before class attached to it. The :before class is just a border but it is overlapping the text. I have tried padding but it's still overlapping. Here is css code

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

How can I get some space between the white border (:before) and text

Edit 1: The css class is applied to a element. Padding-left doesnt work.

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

@DmytroLishtvan If you understand the problem, you don't need a fiddle. :) — Soolie, Nov 20 '17 at 09:19
I would like to see the HTML code that comes with this CSS :) — GreyRoofPigeon, Nov 20 '17 at 09:30

Soolie · Accepted Answer · 2017-11-20T09:33:02.317

2

Just add some padding in the parent element:

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

Tip: Since you already have left: 0, you don't need to worry about the left alignment issues.

Also, as pointed out in the comments, if you don't want the overall size to increase because of padding you can use either of the two:

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

text-indent: 50px;

edited Nov 20 '17 at 09:33

answered Nov 20 '17 at 09:18

Soolie

1,812
9
21

2

Or `text-indent: 50px;` if you don't want to increase the element's size. – Cons7an7ine Nov 20 '17 at 09:29
1

@Cons7an7ine Good one. Also you can use `box-sizing: border-box` so that it gives the same output. Nice one man. – Soolie Nov 20 '17 at 09:31
@Abhi.Net Might be because other styles overriding it? – Soolie Nov 20 '17 at 09:37

Dmytro Lishtvan · Answer 2 · 2017-11-20T09:31:37.510

You need add padding for parent element

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

Should have added one more thing.... The class is applied to a th element. I have tried padding-left , doesnt work. — Abhi.Net, Nov 20 '17 at 09:28
@Abhi.Net added table. That's why i want your fiddle - because all work fine) try add !important to your padding — Dmytro Lishtvan, Nov 20 '17 at 09:32

stop :before and element overlappting

2 Answers2