Add abbr and dfn styles

jhildenbiddle · Mar 8, 2024 · d1bb061 · d1bb061
1 parent fa025c4
commit d1bb061
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/core/base.css b/src/core/base.css
@@ -34,6 +34,11 @@ a {
     text-decoration: underline;
 }
 
+:where(abbr, dfn)[title] {
+    cursor: help;
+    border-bottom: 1px dotted;
+}
+
 b,
 strong {
     color: var(--strong-color);

diff --git a/themeable.md b/themeable.md
@@ -210,6 +210,7 @@ description: >
   <div style="background: var(--rose-800);"></div>
   <div style="background: var(--rose-900);"></div>
 </div>
+
 ## Monochrome Palette
 
 <div style="display: grid; grid-template-columns: repeat(11, 1fr); line-height: 2.25; gap: 1px;">
@@ -453,6 +454,14 @@ console.log(mergedObj);
 
 <br>
 
+<abbr title="Abbreviation">abbr</abbr> tag with title
+
+<abbr>abbr</abbr> (Abbreviation) tag without title
+
+<dfn title="Definition">dfn</dfn> tag with title
+
+<dfn>dfn</dfn> (Definition) tag without title
+
 ## Horizontal Rule
 
 ---