Display fragment links to the left

mui · Dec 4, 2019 · c49a771 · c49a771
1 parent 210c713
commit c49a771
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -186,6 +186,7 @@ const styles = theme => ({
       paddingLeft: 30,
     },
     '& h1, & h2, & h3, & h4': {
+      position: 'relative',
       '& code': {
         fontSize: 'inherit',
         lineHeight: 'inherit',
@@ -194,6 +195,10 @@ const styles = theme => ({
       },
       '& .anchor-link-style': {
         display: 'inline-block',
+        position: 'absolute',
+        // negative box width of the anchor so that it is displayed before the heading
+        // -(iconWidth + anchorPadding)
+        left: 'calc(-0.7em - 16px)',
         padding: '0 8px',
         color: theme.palette.text.secondary,
         '&:hover': {