Question: How can I add text at the top right corner of a table cell without interfering with the existing text content of the cell?

For example, I have a simple HTML table:

```
<table>
<tr>
  <td>Abc</td>
  <td>Defg</td>
</tr>
<tr>
  <td>Hijkl</td>
  <td>Mno</td>
</tr>
</table>

```

It looks like this:
[![enter image description here](https://i.stack.imgur.com/pxkzm.png)](https://i.stack.imgur.com/pxkzm.png)

How can I add a short (one or two word) "label" to the top right corner of a cell such that the table looks like this?
[![enter image description here](https://i.stack.imgur.com/5Rir6.png)](https://i.stack.imgur.com/5Rir6.png)

Answer: 
Use pseudo elements to add to the td

```css
td {
  position: relative;
  width: 200px;
  height: 200px;
  background: yellow;
}

td.one::after {
  content: 'stuff here';
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

td.two::after {
  content: 'different stuff';
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

td::after {
  content: attr(data-tag);
  position: absolute;
  top: 0;
  right: 0;
  background: red;
  color: white;
}
```

```html
<table>
  <tr>
    <td>jaflkasdjf ajl;fjasd;lfja ;lfj a;ljf a jaljfdlajflaj</td>
    <td class="one">lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
  <tr>
    <td class="two">jaflkasdjf ajl;fjas</td>
    <td>lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
</table>

<table>
  <tr>
    <td>jaflkasdjf ajl;fjasd;lfja ;lfj a;ljf a jaljfdlajflaj</td>
    <td data-tag="this is text">lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
  <tr>
    <td data-tag="this is different">jaflkasdjf ajl;fjas</td>
    <td>lajflajd ajlfkkjd flaj jla jkfa</td>
  </tr>
</table>
```

fiddle:
<https://jsfiddle.net/cLpshjk9/9/>

Edit: update for comment.
```
<table>
<tr>
  <td>Abc</td>
  <td>Defg<span> some label </span></td>
</tr>
<tr>
  <td>Hijkl</td>
  <td>Defg<span> some label </span></td>
</tr>
</table>

table {
  border:1px solid black;
}

td {
  width: 200px;
  height: 50px;
  border:1px solid gray;
  position: relative; 
}

td span {
  position: absolute; 
  right: 0;
  top: 0;
  background: gray;
}

```

Fiddle: <https://jsfiddle.net/ykor79mL/>