@@Felix Riesterer

Das tbody-Element muss sein, damit die Semantik einer Tabelle erhalten bleibt.

Wie bitte? Das tbody-Element muss sein, weil HTML das so vorschreibt.

Die <tbody>- und </tbody>-Tags müssen allerdings nicht sein. Das tbody-Elementobjekt wird auch ohne die Tags im DOM angelegt.

Die gewählte Formulierung „damit die Semantik einer Tabelle erhalten bleibt“ halte ich für irreführend.

Mit der content-Eigenschaft wird das Symbol für den jeweiligen Spieler in der Tabellenzelle angezeigt, obwohl im HTML-Code kein solcher Inhalt steht. Es ist ein reines Darstellungselement …

Das leuchtet nicht ein. Die Felder werden im Laufe des Spiels mit x und o^[1] gefüllt; das ist also Inhalt.

Entweder implementiert man das so, dass x und o tatsächlich Textinhalte der td-Elemente sind, oder man lässt sich eine gute Begründung dafür einfallen, warum man das anders implementiert, obwohl das eigentlich Inhalt wäre.

Wenn man sich für letzteres entscheidet:

.tic-tac-toe .o:after {
  content: "o";
  display: block;
  text-align: center;
}
 
.tic-tac-toe .x:after {
  content: "x";
  display: block;
  text-align: center;
}

Das ist unnötig kompliziert; es geschieht ja in beiden Fällen dasselbe: der Klassenbezeichner wird als generierter Inhalt verwendet.

.tic-tac-toe td::after {
  content: attr(class);
  display: block;
  text-align: center;
}

LLAP 🖖