diff --git a/css/elements.css b/css/elements.css
index 202c1739..c701144f 100644
--- a/css/elements.css
+++ b/css/elements.css
@@ -1381,43 +1381,17 @@ a.menu-pane-header-production {
   overflow-y: auto;
 }
 
-li.menu-search-result-clause::before {
-  content: 'clause';
-  width: 40px;
-  display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
-}
-li.menu-search-result-op::before {
-  content: 'op';
-  width: 40px;
-  display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
-}
-
-li.menu-search-result-prod::before {
-  content: 'prod';
+li.menu-search-result::before {
+  display: none;
   width: 40px;
-  display: inline-block;
   text-align: right;
   padding-right: 1ex;
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-
-li.menu-search-result-term::before {
-  content: 'term';
-  width: 40px;
+li.menu-search-result[data-kind]::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: attr(data-kind);
 }
 
 #menu-search-results ul {
diff --git a/js/menu.js b/js/menu.js
index da5e68c8..ae574f74 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -187,30 +187,30 @@ Search.prototype.displayResults = function (results) {
       let key = result.key;
       let entry = result.entry;
       let id = entry.id;
-      let cssClass = '';
+      let kind = '';
       let text = '';
 
       if (entry.type === 'clause') {
         let number = entry.number ? entry.number + ' ' : '';
         text = number + key;
-        cssClass = 'clause';
+        kind = 'clause';
         id = entry.id;
       } else if (entry.type === 'production') {
         text = key;
-        cssClass = 'prod';
+        kind = 'prod';
         id = entry.id;
       } else if (entry.type === 'op') {
         text = key;
-        cssClass = 'op';
+        kind = 'op';
         id = entry.id || entry.refId;
       } else if (entry.type === 'term') {
         text = key;
-        cssClass = 'term';
+        kind = 'term';
         id = entry.id || entry.refId;
       }
 
       if (text) {
-        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+        html += `<li class="menu-search-result"${kind ? ` data-kind="${kind}"` : ''}><a href="${makeLinkToId(id)}">${text}</a></li>`;
       }
     });
 
diff --git a/test/baselines/generated-reference/assets-inline.html b/test/baselines/generated-reference/assets-inline.html
index 9f1493f1..4a3bdd8d 100644
--- a/test/baselines/generated-reference/assets-inline.html
+++ b/test/baselines/generated-reference/assets-inline.html
@@ -271,30 +271,30 @@
       let key = result.key;
       let entry = result.entry;
       let id = entry.id;
-      let cssClass = '';
+      let kind = '';
       let text = '';
 
       if (entry.type === 'clause') {
         let number = entry.number ? entry.number + ' ' : '';
         text = number + key;
-        cssClass = 'clause';
+        kind = 'clause';
         id = entry.id;
       } else if (entry.type === 'production') {
         text = key;
-        cssClass = 'prod';
+        kind = 'prod';
         id = entry.id;
       } else if (entry.type === 'op') {
         text = key;
-        cssClass = 'op';
+        kind = 'op';
         id = entry.id || entry.refId;
       } else if (entry.type === 'term') {
         text = key;
-        cssClass = 'term';
+        kind = 'term';
         id = entry.id || entry.refId;
       }
 
       if (text) {
-        html += `<li class=menu-search-result-${cssClass}><a href="${makeLinkToId(id)}">${text}</a></li>`;
+        html += `<li class="menu-search-result"${kind ? ` data-kind="${kind}"` : ''}><a href="${makeLinkToId(id)}">${text}</a></li>`;
       }
     });
 
@@ -2996,43 +2996,17 @@
   overflow-y: auto;
 }
 
-li.menu-search-result-clause::before {
-  content: 'clause';
-  width: 40px;
-  display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
-}
-li.menu-search-result-op::before {
-  content: 'op';
-  width: 40px;
-  display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
-}
-
-li.menu-search-result-prod::before {
-  content: 'prod';
+li.menu-search-result::before {
+  display: none;
   width: 40px;
-  display: inline-block;
   text-align: right;
   padding-right: 1ex;
   color: var(--control-dimmed-foreground-color);
   font-size: 75%;
 }
-
-li.menu-search-result-term::before {
-  content: 'term';
-  width: 40px;
+li.menu-search-result[data-kind]::before {
   display: inline-block;
-  text-align: right;
-  padding-right: 1ex;
-  color: var(--control-dimmed-foreground-color);
-  font-size: 75%;
+  content: attr(data-kind);
 }
 
 #menu-search-results ul {