Table TD:after

by Jens Kühn

HTML

<table>
  <tbody>
    <tr>
      <td onclick="alert('bird')">bird</td>
      <td>animal</td>
      <td onclick="alert('nature')">nature</td>
    </tr>
    <tr>
      <td><span onclick="alert('link')">link</span></td>
      <td>robot</td>
      <td><span onclick="alert('links')">links</span></td>
    </tr>
  </tbody>

CSS

table {
  border: 1px solid #ccc;
  padding: 10px;
}

table td {
  border: 1px solid #ccc;
  padding: 5px;
  background-color: #dfdfdf;
  position: relative;
  overflow: hidden;
}

td:first-child:after {
  content: 'after';
  position: absolute;
  top:0;
  left:0;
  width:100px;
  height:100px;
  background-color: #f00;
}