diff --git a/css/reveal.css b/css/reveal.css
index c6ab0b1643f..47f561c5b00 100644
--- a/css/reveal.css
+++ b/css/reveal.css
@@ -1442,17 +1442,19 @@ body {
 .reveal .hljs table {
   margin: initial; }
 
-.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
-  opacity: 0.25; }
-
 .reveal .hljs-ln-code,
 .reveal .hljs-ln-numbers {
   padding: 0;
   border: 0; }
 
 .reveal .hljs-ln-numbers {
-  padding-right: 10px;
-  text-align: right; }
+  opacity: 0.6;
+  padding-right: 0.75em;
+  text-align: right;
+  vertical-align: top; }
+
+.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
+  opacity: 0.25; }
 
 /*********************************************
  * ROLLING LINKS
diff --git a/css/reveal.scss b/css/reveal.scss
index 9b0ddd60a6e..3b4b05ca4b0 100644
--- a/css/reveal.scss
+++ b/css/reveal.scss
@@ -1577,19 +1577,21 @@ $controlsArrowAngleActive: 36deg;
 	margin: initial;
 }
 
-.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
-	opacity: 0.25;
-}
-
 .reveal .hljs-ln-code,
 .reveal .hljs-ln-numbers {
 	padding: 0;
 	border: 0;
 }
 
-.reveal .hljs-ln-numbers  {
-	padding-right: 10px;
+.reveal .hljs-ln-numbers {
+	opacity: 0.6;
+	padding-right: 0.75em;
 	text-align: right;
+	vertical-align: top;
+}
+
+.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
+	opacity: 0.25;
 }