made underline effect more comprehensive + added comments

Author: catsizedcoder

_sass/specialized.scss

@@ -1,4 +1,5 @@
 /* This file is where all special things that aren't in html by default will be located */
+/* So far there is highlighted and underlined */
 .highlighted {
   background-color: #f29333;
   color: #3f1b66 !important;
@@ -22,9 +23,16 @@
   left: 0;
   right: 0;
   bottom: 0;
-  height: 8px;
-  background-image: url("data:image/svg+xml,%3Csvg width='100' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 Q10 8 20 4 T40 4 T60 4 T80 4 T100 4' stroke='%23f29333' stroke-width='2' fill='none'/%3E%3C/svg%3E");
+  height: 2px;
+  background-color: #f29333;
+  transition: all 0.3s ease;
+  pointer-events: none;
+}
+
+.underlined:hover::after {
+  height: 10px;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg width='100' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 Q2.5 0 5 5 T10 5 T15 5 T20 5 T25 5 T30 5 T35 5 T40 5 T45 5 T50 5 T55 5 T60 5 T65 5 T70 5 T75 5 T80 5 T85 5 T90 5 T95 5 T100 5' stroke='%23f29333' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
   background-size: 100% 100%;
   background-repeat: no-repeat;
-  pointer-events: none;
-}
+}