将伪元素居中在父元素上并显示：table-cell

Question

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 .

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

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

Answer 3

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