'Center pseudo-element on parent element with display: table-cell

How would I go about centering a pseudo-element on an element with display: table-cell? My attempts have just centered it to the parent element with display: table.

htmlcssnext.js


Solution 1:[1]

its hard to figure out what you are trying to do when you don't provied any code, is it something like this you are trying to do? just paste this to an html document

<style>
#table-container {
    display: table;
    padding: 5px;
}

.tr {
    display: table-row;
    padding: 10px;
}

.td {
    display: table-cell;
    padding: 10px;
    width: 100px;
    border: #000000 solid 1px;
    margin: 10px;
}
</style>
<div id="container">
    <div class="tr">
         <div class="td"></div>
         <div class="td"></div>
         <div class="td"></div>
    </div>
    <div class="tr">
         <div class="td"></div>
         <div class="td"></div>
         <div class="td"></div>
    </div>
</div>

Solution 2:[2]

To get a pseudo element to pick up values such as its dimensions and positioning from its 'owning' element you have to set their positions.

If the position of the owning element is not set then the system will search 'back up' the document until it finds an ancestor with position set and things will be set up in relation to that.

In this snippet as a demo the pseudo element is positioned absolutely and the table-cell itself positioned relative.

.parent {
  width: 20vmin;
  height: 20vmin;
  background: cyan;
  display: table;
}

.child {
  display: table-cell;
  position: relative;
  background: yellow;
}

.child::after {
  content: '';
  width: 50%;
  height: 50%;
  background-color: pink;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="parent">
  <div class="child"></div>
</div>

Solution 3:[3]

I solved it. The trick was to put a container in each cell that handled centering the element and thus its pseudo-element.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rabbit
Solution 2 A Haworth
Solution 3 Bash Elliott

Related Questions