diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js
index abf1775d1768fd..f51d320ae6294c 100644
--- a/docs/src/modules/components/ApiPage.js
+++ b/docs/src/modules/components/ApiPage.js
@@ -53,11 +53,13 @@ function Heading(props) {
 
   return (
     <Level id={hash}>
-      {getTranslatedHeader(t, hash)}
-      <a aria-labelledby={hash} className="anchor-link" href={`#${hash}`} tabIndex={-1}>
-        <svg>
-          <use xlinkHref="#anchor-link-icon" />
-        </svg>
+      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
+        {getTranslatedHeader(t, hash)}
+        <div className="anchor-icon">
+          <svg>
+            <use xlinkHref="#anchor-link-icon" />
+          </svg>
+        </div>
       </a>
     </Level>
   );
diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
index bc09404849b40c..63588a4ff1f28a 100644
--- a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
+++ b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx
@@ -93,16 +93,18 @@ export default function ClassesSection(props: ClassesSectionProps) {
     <React.Fragment>
       <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}>
         <Level id={titleHash} style={{ flexGrow: 1 }}>
-          {t(title)}
           <a
             aria-labelledby={titleHash}
-            className="anchor-link"
+            className="title-link-to-anchor"
             href={`#${titleHash}`}
             tabIndex={-1}
           >
-            <svg>
-              <use xlinkHref="#anchor-link-icon" />
-            </svg>
+            {t(title)}
+            <div className="anchor-icon">
+              <svg>
+                <use xlinkHref="#anchor-link-icon" />
+              </svg>
+            </div>
           </a>
         </Level>
         <ToggleDisplayOption
diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
index fd52e51baa758c..aab0a34a84f154 100644
--- a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
+++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js
@@ -122,16 +122,18 @@ export default function PropertiesSection(props) {
     <React.Fragment>
       <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}>
         <Level id={titleHash} style={{ flexGrow: 1 }}>
-          {t(title)}
           <a
             aria-labelledby={titleHash}
-            className="anchor-link"
+            className="title-link-to-anchor"
             href={`#${titleHash}`}
             tabIndex={-1}
           >
-            <svg>
-              <use xlinkHref="#anchor-link-icon" />
-            </svg>
+            {t(title)}
+            <div className="anchor-icon">
+              <svg>
+                <use xlinkHref="#anchor-link-icon" />
+              </svg>
+            </div>
           </a>
         </Level>
         <ToggleDisplayOption
diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
index dcbb7bd63807af..238965cf66c195 100644
--- a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
+++ b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx
@@ -55,16 +55,18 @@ export default function SlotsSection(props: SlotsSectionProps) {
     <React.Fragment>
       <Box sx={{ display: 'flex', alignItems: 'baseline', mb: 1 }}>
         <Level id={titleHash} style={{ flexGrow: 1 }}>
-          {t(title)}
           <a
             aria-labelledby={titleHash}
-            className="anchor-link"
+            className="title-link-to-anchor"
             href={`#${titleHash}`}
             tabIndex={-1}
           >
-            <svg>
-              <use xlinkHref="#anchor-link-icon" />
-            </svg>
+            <div className="anchor-icon">
+              {t(title)}
+              <svg>
+                <use xlinkHref="#anchor-link-icon" />
+              </svg>
+            </div>
           </a>
         </Level>
         <ToggleDisplayOption
diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js
index c089b6302b6783..eab0596c3c8c06 100644
--- a/docs/src/modules/components/ComponentsApiContent.js
+++ b/docs/src/modules/components/ComponentsApiContent.js
@@ -33,11 +33,13 @@ function Heading(props) {
 
   return (
     <Level id={hash}>
-      {getTranslatedHeader(t, hash, text)}
-      <a aria-labelledby={hash} className="anchor-link" href={`#${hash}`} tabIndex={-1}>
-        <svg>
-          <use xlinkHref="#anchor-link-icon" />
-        </svg>
+      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
+        {getTranslatedHeader(t, hash, text)}
+        <div className="anchor-icon">
+          <svg>
+            <use xlinkHref="#anchor-link-icon" />
+          </svg>
+        </div>
       </a>
     </Level>
   );
diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js
index ded5a05f01e5fa..acb36479c6dd62 100644
--- a/docs/src/modules/components/HooksApiContent.js
+++ b/docs/src/modules/components/HooksApiContent.js
@@ -27,11 +27,13 @@ function Heading(props) {
 
   return (
     <Level id={hash}>
-      {getTranslatedHeader(t, hash, text)}
-      <a aria-labelledby={hash} className="anchor-link" href={`#${hash}`} tabIndex={-1}>
-        <svg>
-          <use xlinkHref="#anchor-link-icon" />
-        </svg>
+      <a aria-labelledby={hash} className="title-link-to-anchor" href={`#${hash}`} tabIndex={-1}>
+        {getTranslatedHeader(t, hash, text)}
+        <div className="anchor-icon">
+          <svg>
+            <use xlinkHref="#anchor-link-icon" />
+          </svg>
+        </div>
       </a>
     </Level>
   );
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
index 7554dd0820ceac..371da06d34a5cd 100644
--- a/docs/src/modules/components/MarkdownElement.js
+++ b/docs/src/modules/components/MarkdownElement.js
@@ -134,26 +134,33 @@ const Root = styled('div')(
         // Remove scroll on small screens.
         wordBreak: 'break-all',
       },
-      '& .anchor-link': {
+      '& .title-link-to-anchor': {
+        color: 'inherit',
+        textDecoration: 'none',
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+      },
+      '& .anchor-icon': {
         // To prevent the link to get the focus.
         display: 'inline-flex',
         alignItems: 'center',
         visibility: 'hidden',
       },
-      '& a:not(.anchor-link):hover': {
+      '& a:not(.title-link-to-anchor):hover': {
         color: 'currentColor',
         border: 'none',
         boxShadow: '0 1px 0 0 currentColor',
         textDecoration: 'none',
       },
-      '& .anchor-link, & .comment-link': {
+      '& .anchor-icon, & .comment-link': {
         padding: 0,
         cursor: 'pointer',
         alignItems: 'center',
         justifyContent: 'center',
         flexShrink: 0,
         textAlign: 'center',
-        marginLeft: 4,
+        marginLeft: 8,
         height: 26,
         width: 26,
         backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.grey[50]})`,
@@ -174,7 +181,7 @@ const Root = styled('div')(
           verticalAlign: 'middle',
         },
       },
-      '&:hover .anchor-link': {
+      '&:hover .anchor-icon': {
         visibility: 'visible',
       },
       '& .comment-link': {
@@ -415,7 +422,7 @@ const Root = styled('div')(
       // Remove link arrow for ads
       display: 'none',
     },
-    '& a, & a code': {
+    '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
       // Style taken from the Link component
       color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
       fontWeight: theme.typography.fontWeightMedium,
@@ -425,7 +432,7 @@ const Root = styled('div')(
         textDecorationColor: 'inherit',
       },
     },
-    '& a code': {
+    '& a:not(.title-link-to-anchor) code': {
       color: darken(lightTheme.palette.primary.main, 0.2),
     },
     '& img, & video': {
@@ -670,7 +677,7 @@ const Root = styled('div')(
         color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`,
       },
       '& h1, & h2, & h3, & h4': {
-        '&:hover .anchor-link, & .comment-link': {
+        '&:hover .anchor-icon, & .comment-link': {
           color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primaryDark[300]})`,
           borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`,
           backgroundColor: alpha(darkTheme.palette.primaryDark[700], 0.5),
@@ -773,10 +780,10 @@ const Root = styled('div')(
           },
         },
       },
-      '& a, & a code': {
+      '& a:not(.title-link-to-anchor), & a:not(.title-link-to-anchor) code': {
         color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`,
       },
-      '& a code': {
+      '& a:not(.title-link-to-anchor) code': {
         color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`,
       },
       '& kbd.key': {
diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
index a9848f583dce47..00a20879f5f958 100644
--- a/packages/markdown/parseMarkdown.js
+++ b/packages/markdown/parseMarkdown.js
@@ -364,11 +364,7 @@ function createRender(context) {
       }
 
       return [
-        `<h${level} id="${hash}">`,
-        headingHtml,
-        `<a aria-labelledby="${hash}" class="anchor-link" href="#${hash}" tabindex="-1">`,
-        '<svg><use xlink:href="#anchor-link-icon" /></svg>',
-        '</a>',
+        `<h${level} id="${hash}"><a href="#${hash}" class="title-link-to-anchor">${headingHtml}<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a>`,
         `<button title="Post a comment" class="comment-link" data-feedback-hash="${hash}">`,
         '<svg><use xlink:href="#comment-link-icon" /></svg>',
         `</button>`,
diff --git a/packages/markdown/parseMarkdown.test.js b/packages/markdown/parseMarkdown.test.js
index 20cf39596a17ab..63ce3631d831ee 100644
--- a/packages/markdown/parseMarkdown.test.js
+++ b/packages/markdown/parseMarkdown.test.js
@@ -295,9 +295,9 @@ authors:
       ).to.equal(
         [
           `<h1>Accordion</h1>`,
-          `<h2 id="basic-features">Basic features 🧪<a aria-labelledby="basic-features" class="anchor-link" href="#basic-features" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-features"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
-          `<h2 id="using-slots-and-slotprops">Using <code>slots</code> and <code>slotProps</code><a aria-labelledby="using-slots-and-slotprops" class="anchor-link" href="#using-slots-and-slotprops" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="using-slots-and-slotprops"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
-          `<h3 id="specific-example">Specific example<a aria-labelledby="specific-example" class="anchor-link" href="#specific-example" tabindex="-1"><svg><use xlink:href="#anchor-link-icon" /></svg></a><button title="Post a comment" class="comment-link" data-feedback-hash="specific-example"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3>`,
+          `<h2 id="basic-features"><a href="#basic-features" class="title-link-to-anchor">Basic features 🧪<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="basic-features"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
+          `<h2 id="using-slots-and-slotprops"><a href="#using-slots-and-slotprops" class="title-link-to-anchor">Using <code>slots</code> and <code>slotProps</code><div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="using-slots-and-slotprops"><svg><use xlink:href="#comment-link-icon" /></svg></button></h2>`,
+          `<h3 id="specific-example"><a href="#specific-example" class="title-link-to-anchor">Specific example<div class="anchor-icon"><svg><use xlink:href="#anchor-link-icon" /></svg></div></a><button title="Post a comment" class="comment-link" data-feedback-hash="specific-example"><svg><use xlink:href="#comment-link-icon" /></svg></button></h3>`,
         ].join(''),
       );