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

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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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