Restyle test.html show-tokens with hover class names and fatter borders.

PrismJS · Jul 7, 2024 · f20a8d6 · f20a8d6
1 parent 59e5a34
commit f20a8d6
Showing 1 changed file with 22 additions and 3 deletions.
diff --git a/test.html b/test.html
@@ -67,11 +67,30 @@
 }
 
 .show-tokens .token {
-	border: 1px solid;
-	padding: 6px 1px;
+	border: 2px solid;
+	padding: 4px 5px;
+	display: inline-block;
+	position: relative;
+}
+.show-tokens .token:has(> .token):hover {
+	border-color: cornflowerblue;
+}
+.show-tokens .token:has(> .token):hover::before {
+	content: attr(class);
+	position: absolute;
+	font-size: 60%;
+	left: 0;
+	top: -15px;
+}
+.show-tokens .token:not(:has(> .token)):hover::before {
+	content: attr(class);
+	position: absolute;
+	font-size: 60%;
+	left: 0;
+	bottom: -15px;
 }
 .show-tokens .token > .token {
-	padding: 4px 1px;
+	padding: 3px 1px;
 }
 .show-tokens .token > .token > .token {
 	padding: 2px 1px;