Add symbol for header anchor as CSS variable and rule using :before

2 years ago · 3aea38991c
parent 3355fcc1df
commit 3aea38991c
2 changed files with 12 additions and 0 deletions
--- a/src/client/theme-default/styles/components/vp-doc.css
+++ b/src/client/theme-default/styles/components/vp-doc.css
@ -45,6 +45,10 @@
  transition: color 0.25s, opacity 0.25s;
 }

+.vp-doc .header-anchor:before {
+  content: var(--vp-header-anchor-symbol);
+}
+
 .vp-doc h1:hover .header-anchor,
 .vp-doc h1 .header-anchor:focus,
 .vp-doc h2:hover .header-anchor,
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@ -193,6 +193,14 @@
  --vp-layout-max-width: 1440px;
 }

+/**
+ * Component: Header Anchor
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-header-anchor-symbol: '#';
+}
+
 /**
 * Component: Code
 * -------------------------------------------------------------------------- */