Pseudoelement – Sebastians Blog https://sgaul.de Neues aus den Softwareminen Thu, 13 Mar 2014 20:34:49 +0000 de-DE hourly 1 https://wordpress.org/?v=6.1.7 https://sgaul.de/wp-content/uploads/2019/02/cropped-sgaul-2-1-32x32.jpg Pseudoelement – Sebastians Blog https://sgaul.de 32 32 Javascript-Beispiele gleichzeitig anzeigen und ausführen https://sgaul.de/2012/05/27/javascript-beispiele-anzeigen-und-ausfuhren/ Sun, 27 May 2012 15:38:25 +0000 https://sgaul.de/?p=1205 Eine nette Technik, auf die Christian Heilmann in seinem Blog hinweist: Script-Elemente im HTML sind ganz normale Elemente, die nur durch ihre CSS-Display-Eigenschaft unsichtbar sind. Ändert man diese, kann man ein Script-Element als Beispielcode nehmen und gleichzeitig ausführen.

<script style=“display:block;“>

Ergänzt man das Skript-Element um die passende Display-Eigenschaft, wird es sichtbar und trotzdem ausgeführt:

Hier der Code dieses Beispiels:

Das Javascript sollte natürlich auch funktionieren. Einfach mal doppelklicken…

Beschriftungen mit CSS-Pseudoelementen

Zudem lässt sich eine Beschriftung wie „Quellcode:“ dank der CSS-Pseudoelemente :before und :after ohne Eingriff in das Markup hinzufügen:

script:before{
  content: 'Quellcode:';
}

Auf jeden Fall eine nette Idee. Sollte man dran denken, wenn man mal ein JS-Projekt dokumentiert.

]]>