Adding a character on ANY position of a cell without changing the TD centering text already displaye-CodePudding

I have

<table>
  <tr>
    <td style='text-align:center'>
      CENTERED
    </td>    
  </tr>
</table>

I would like to ADD a single character either on the left or on the right of CENTERED, without affecting the x-position of the CENTERED string.
To be clear: NOT on the left of the cell, but on the left of the CENTERED string. And the CENTERED string can be anything, so I do not want to calculate something pixel-perfect and move it by some constant pixel value.
I tried fiddling with position:absolute/relative and padding-left/left but I couldn't find a working solution.
Ideally if it could be build with classes:

<table>
  <tr>
    <td style='text-align:center'>
      <span class='centeredRegardless'>CENTERED</span>
      <span class='onTheLeftWithoutAffectingThePreviousOne'>*</span>
    </td>    
  </tr>
</table>

Then I will need those classes defined :)
Thank you

CodePudding user response：

If you want some cells to have the extra character and some not you could put the extra character as content in a pseudo element positioned absolutely so it doesn't change the positioning of the actual text at all.

For a left character position is right: 100% and for a character on the right the positioning is left: 100%.

td {
  position: relative;
}

td.extraChar::before {
  content: '*';
  position: absolute;
  right: 100%;
}

<table>
  <tr>
    <td style='text-align:center' >
      <span class='centeredRegardless'>CENTERED</span>
    </td>
  </tr>
  <tr>
    <td style='text-align:center'>
      <span class='centeredRegardless'>CENTERED</span>
    </td>
  </tr>
</table>

CodePudding user response：

Something like this? (remove and collapse the border when happy)

td { border: 1px solid black; min-width:20px; }
.left { text-align:left;} 
.right { text-align:right;}
.center { text-align:center;}

<table>
  <tr>
    <td >></td>
    <td >
      CENTERED
    </td>
    <td ><</td>
  </tr>
</table>