diff --git a/h/static/scripts/annotator/highlighter.coffee b/h/static/scripts/annotator/highlighter.coffee
index 621f075234a..5c72d6aacb4 100644
--- a/h/static/scripts/annotator/highlighter.coffee
+++ b/h/static/scripts/annotator/highlighter.coffee
@@ -10,7 +10,10 @@ $ = require('jquery')
 # Returns an array of highlight Elements.
 exports.highlightRange = (normedRange, cssClass='annotator-hl') ->
   white = /^\s*$/
-  hl = $("<span class='#{cssClass}'></span>")
+
+  # A custom element name is used here rather than `<span>` to reduce the
+  # likelihood of highlights being hidden by page styling.
+  hl = $("<hypothesis-highlight class='#{cssClass}'></hypothesis-highlight>")
 
   # Ignore text nodes that contain only whitespace characters. This prevents
   # spans being injected between elements that can only contain a restricted
diff --git a/h/static/scripts/annotator/test/highlighter-test.coffee b/h/static/scripts/annotator/test/highlighter-test.coffee
index ec83fed997a..38715cdb047 100644
--- a/h/static/scripts/annotator/test/highlighter-test.coffee
+++ b/h/static/scripts/annotator/test/highlighter-test.coffee
@@ -16,6 +16,7 @@ describe "highlightRange", ->
     result = highlighter.highlightRange(r)
     assert.equal(result.length, 1)
     assert.strictEqual(el.childNodes[0], result[0])
+    assert.equal(result[0].nodeName, 'HYPOTHESIS-HIGHLIGHT');
     assert.isTrue(result[0].classList.contains('annotator-hl'))
 
   it 'skips text nodes that are only white space', ->