diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index 675eca2ee71..abf7f12d576 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -320,19 +320,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.yellow.first.text.has-note:after {
+.c4 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.green {
@@ -367,19 +369,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.green.first.text.has-note:after {
+.c4 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.blue {
@@ -414,19 +418,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.blue.first.text.has-note:after {
+.c4 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.purple {
@@ -461,19 +467,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.purple.first.text.has-note:after {
+.c4 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.pink {
@@ -508,19 +516,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.pink.first.text.has-note:after {
+.c4 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .os-figure,
@@ -581,24 +591,24 @@ Array [
 }
 
 @media screen {
-  .c4 .highlight::before,
-  .c4 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
+  .c4 .highlight[data-start-message]::before,
+  .c4 .highlight[data-end-message]::after {
     height: 1px;
+    width: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
-    width: 1px;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
   }
 
-  .c4 .highlight[data-start-message]::before {
+  .c4 .highlight.first[data-start-message]::before {
     content: attr(data-start-message);
   }
 
-  .c4 .highlight[data-end-message]::after {
+  .c4 .highlight.last[data-end-message]::after {
     content: attr(data-end-message);
   }
 }
@@ -690,32 +700,11 @@ Array [
     font-weight: bold;
   }
 
-  .c4 .search-highlight::before,
-  .c4 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .c4 .search-highlight,
   .c4 .search-highlight .math {
     background-color: #ffea00;
   }
 
-  .c4 .search-highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c4 .search-highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-
   .c4 .search-highlight[aria-current],
   .c4 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;
diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index f4305e4681d..485a5fca3cd 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -22,18 +22,14 @@ export const contentTextStyle = css`
 // Search and key term highlights need to target .math as well,
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
-
-const hideBeforeAndAfter = `
-  &::before,
-  &::after {
-    clip-path: inset(100%);
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
+const screenreaderOnly = `
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
 `;
 
 export default styled(MainContent)`
@@ -70,13 +66,16 @@ export default styled(MainContent)`
     z-index: 1;
 
     @media screen {
-      ${hideBeforeAndAfter}
+      &[data-start-message]::before,
+      &[data-end-message]::after {
+        ${screenreaderOnly}
+      }
 
-      &[data-start-message]::before {
+      &.first[data-start-message]::before {
         content: attr(data-start-message);
       }
 
-      &[data-end-message]::after {
+      &.last[data-end-message]::after {
         content: attr(data-end-message);
       }
     }
@@ -122,17 +121,21 @@ export default styled(MainContent)`
         }
       }
 
-      &.first.text.has-note:after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        content: "";
-        width: 0;
-        height: 0;
-        opacity: 0.8;
-        border-left: ${highlightIndicatorSize}em solid ${style.focused};
-        border-top: ${highlightIndicatorSize}em solid transparent;
-        transform: rotate(90deg);
+      &.first.text.has-note {
+        &:not(.last)::before {
+          content: "";
+        }
+
+        ::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          clip-path: initial;
+          clip: initial;
+          opacity: 0.8;
+          border-left: ${highlightIndicatorSize}em solid ${style.focused};
+          border-bottom: ${highlightIndicatorSize}em solid transparent;
+        }
       }
 
       @media screen {
@@ -161,21 +164,12 @@ export default styled(MainContent)`
 
   @media screen {
     .search-highlight {
-      ${hideBeforeAndAfter}
       font-weight: bold;
 
       ${SELF_AND_CHILD_MATH_SELECTOR} {
         background-color: #ffea00;
       }
 
-      &[data-start-message]::before {
-        content: attr(data-start-message);
-      }
-
-      &[data-end-message]::after {
-        content: attr(data-end-message);
-      }
-
       &[aria-current] {
         ${SELF_AND_CHILD_MATH_SELECTOR} {
           background-color: #ff9e4b;
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index f31dce84344..29e44f554de 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -704,19 +704,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.yellow.first.text.has-note:after {
+.c78 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.green {
@@ -751,19 +753,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.green.first.text.has-note:after {
+.c78 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.blue {
@@ -798,19 +802,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.blue.first.text.has-note:after {
+.c78 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.purple {
@@ -845,19 +851,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.purple.first.text.has-note:after {
+.c78 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.pink {
@@ -892,19 +900,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.pink.first.text.has-note:after {
+.c78 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .os-figure,
@@ -2216,24 +2226,24 @@ li[aria-label="Current Page"] .c60 {
 }
 
 @media screen {
-  .c78 .highlight::before,
-  .c78 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
+  .c78 .highlight[data-start-message]::before,
+  .c78 .highlight[data-end-message]::after {
     height: 1px;
+    width: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
-    width: 1px;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
   }
 
-  .c78 .highlight[data-start-message]::before {
+  .c78 .highlight.first[data-start-message]::before {
     content: attr(data-start-message);
   }
 
-  .c78 .highlight[data-end-message]::after {
+  .c78 .highlight.last[data-end-message]::after {
     content: attr(data-end-message);
   }
 }
@@ -2325,32 +2335,11 @@ li[aria-label="Current Page"] .c60 {
     font-weight: bold;
   }
 
-  .c78 .search-highlight::before,
-  .c78 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c78 .search-highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-
   .c78 .search-highlight[aria-current],
   .c78 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;
@@ -5452,19 +5441,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.yellow.first.text.has-note:after {
+.c78 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.green {
@@ -5499,19 +5490,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.green.first.text.has-note:after {
+.c78 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.blue {
@@ -5546,19 +5539,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.blue.first.text.has-note:after {
+.c78 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.purple {
@@ -5593,19 +5588,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.purple.first.text.has-note:after {
+.c78 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.pink {
@@ -5640,19 +5637,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.pink.first.text.has-note:after {
+.c78 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .os-figure,
@@ -6811,24 +6810,24 @@ li[aria-label="Current Page"] .c60 {
 }
 
 @media screen {
-  .c78 .highlight::before,
-  .c78 .highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
+  .c78 .highlight[data-start-message]::before,
+  .c78 .highlight[data-end-message]::after {
     height: 1px;
+    width: 1px;
     overflow: hidden;
     position: absolute;
     white-space: nowrap;
-    width: 1px;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
   }
 
-  .c78 .highlight[data-start-message]::before {
+  .c78 .highlight.first[data-start-message]::before {
     content: attr(data-start-message);
   }
 
-  .c78 .highlight[data-end-message]::after {
+  .c78 .highlight.last[data-end-message]::after {
     content: attr(data-end-message);
   }
 }
@@ -6920,32 +6919,11 @@ li[aria-label="Current Page"] .c60 {
     font-weight: bold;
   }
 
-  .c78 .search-highlight::before,
-  .c78 .search-highlight::after {
-    -webkit-clip-path: inset(100%);
-    clip-path: inset(100%);
-    -webkit-clip: rect(1px,1px,1px,1px);
-    clip: rect(1px,1px,1px,1px);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[data-start-message]::before {
-    content: attr(data-start-message);
-  }
-
-  .c78 .search-highlight[data-end-message]::after {
-    content: attr(data-end-message);
-  }
-
   .c78 .search-highlight[aria-current],
   .c78 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;