How do I make the "after" pseudo-element always be on the same line in my table headers?

Question

I have the following CSS to format a table with some sticky headers:

div {
  position: relative;
  z-index: 1;
  overflow: scroll;
  height: 350px;
  width: 500px;
}

table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}

th, td {
  padding: 5px 10px;
  border: 1px solid #000;
  background: #fff;
  vertical-align: top;
}

th {
  color: #000;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

th:first-child {
  left: 0;
  z-index: 6;
}

td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: #ccc;
}

thead th {
  z-index: 5;
}

th:after {
  content: "";
  display: inline-block;
  vertical-align: inherit;
  height: 0;
  width: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  margin-right: 1px;
  margin-left: 10px;
  float: right;
}

th[data-sorted="initial"]:after {
  visibility: visible;
  border-top-color: #ccc;
  margin-top: 5px;
}

th[data-sorted="true"]:after {
  visibility: visible;
}

th[data-sorted-direction="descending"]:after {
  border-top-color: inherit;
  margin-top: 7px;
}

th[data-sorted-direction="ascending"]:after {
  border-bottom-color: inherit;
  margin-top: 2px;
}

Here's a Codepen showing it off:

https://codepen.io/anon/pen/jQjazq

If you tap on the "Min" column, the arrow appears below it. Which looks stupid. With CSS how do I make it so the width of the column takes into account that arrow so they're wider by default?

Answer 1

The way I've handled situations like this is to apply padding to the parent element and a corresponding negative margin to the pseudo-element such that if wraps, it wraps the whole thing.

In your example I changed the selectors a bit to target the strong rather than the th. But other than that, the key changes are the styles on th strong and the margin-right on th strong:after.

https://codepen.io/anon/pen/mayWja

th strong {
  display: inline-block;
  padding-right: 20px;
}

th strong:after {
  content: "";
  display: inline-block;
  vertical-align: inherit;
  height: 0;
  width: 0;
  border-width: 5px;
  border-style: solid;
  border-color: transparent;
  margin-right: -20px;
  margin-left: 10px;
  float: right;
}

th[data-sorted="initial"] strong:after {
  visibility: visible;
  border-top-color: red;
  margin-top: 5px;
}

th[data-sorted="true"] strong:after {
  visibility: visible;
}

th[data-sorted-direction="descending"] strong:after {
  border-top-color: inherit;
  margin-top: 7px;
}

th[data-sorted-direction="ascending"] strong:after {
  border-bottom-color: inherit;
  margin-top: 2px;
}