diff --git a/code/addons/docs/src/blocks/components/DocsPage.test.tsx b/code/addons/docs/src/blocks/components/DocsPage.test.tsx
new file mode 100644
index 000000000000..fcf3fcbbe402
--- /dev/null
+++ b/code/addons/docs/src/blocks/components/DocsPage.test.tsx
@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import { DocsContent } from './DocsPage';
+
+function ThemedDocsContent({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <DocsContent>{children}</DocsContent>
+    </ThemeProvider>
+  );
+}
+
+describe('DocsContent', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('accessibility', () => {
+    it('should render links with underline text decoration for accessibility', () => {
+      const { container } = render(
+        <ThemedDocsContent>
+          <p>
+            This is a paragraph with a <a href="https://example.com">link</a> inside.
+          </p>
+        </ThemedDocsContent>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render links with underline in dark theme', () => {
+      const { container } = render(
+        <ThemeProvider theme={convert(themes.dark)}>
+          <DocsContent>
+            <p>
+              This is a paragraph with a <a href="https://example.com">link</a> inside.
+            </p>
+          </DocsContent>
+        </ThemeProvider>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render multiple links with underlines in text blocks', () => {
+      const { container } = render(
+        <ThemedDocsContent>
+          <div>
+            <p>
+              Check out <a href="https://example.com">this link</a> and also{' '}
+              <a href="https://another.com">this other link</a>.
+            </p>
+            <p>
+              Here is <a href="https://third.com">a third link</a> in another paragraph.
+            </p>
+          </div>
+        </ThemedDocsContent>
+      );
+
+      const links = container.querySelectorAll('a');
+      expect(links).toHaveLength(3);
+
+      links.forEach((link) => {
+        const styles = window.getComputedStyle(link);
+        expect(styles.textDecoration).toContain('underline');
+      });
+    });
+
+    it('should not underline anchor position markers (a.anchor)', () => {
+      const { container } = render(
+        <ThemedDocsContent>
+          <h2>
+            <a className="anchor" href="#heading">
+              Heading
+            </a>
+          </h2>
+        </ThemedDocsContent>
+      );
+
+      const anchor = container.querySelector('a.anchor');
+      expect(anchor).toBeTruthy();
+
+      const styles = window.getComputedStyle(anchor!);
+      expect(styles.textDecoration).not.toContain('underline');
+    });
+  });
+});
diff --git a/code/addons/docs/src/blocks/components/DocsPage.tsx b/code/addons/docs/src/blocks/components/DocsPage.tsx
index 11e01c2c5765..d2f1537c2ab4 100644
--- a/code/addons/docs/src/blocks/components/DocsPage.tsx
+++ b/code/addons/docs/src/blocks/components/DocsPage.tsx
@@ -114,7 +114,10 @@ export const DocsContent = styled.div(({ theme }) => {
       lineHeight: '24px',
 
       color: theme.color.secondary,
-      textDecoration: 'none',
+      // Ensure WCAG Level A compliance (SC 1.4.1), see https://www.w3.org/WAI/WCAG22/Techniques/failures/F73
+      textDecoration: 'underline',
+      textDecorationThickness: '0.03125rem',
+      textUnderlineOffset: '0.11em',
       '&.absent': {
         color: '#cc0000',
       },
@@ -127,6 +130,10 @@ export const DocsContent = styled.div(({ theme }) => {
         top: 0,
         left: 0,
         bottom: 0,
+        textDecoration: 'none',
+      },
+      '&.anchor:hover, &.anchor:focus': {
+        textDecoration: 'underline',
       },
     },
     [toGlobalSelector('blockquote')]: {
diff --git a/code/core/src/components/components/typography/DocumentWrapper.test.tsx b/code/core/src/components/components/typography/DocumentWrapper.test.tsx
new file mode 100644
index 000000000000..3c15119bff92
--- /dev/null
+++ b/code/core/src/components/components/typography/DocumentWrapper.test.tsx
@@ -0,0 +1,83 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import { DocumentWrapper } from './DocumentWrapper';
+
+function ThemedDocumentWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <DocumentWrapper>{children}</DocumentWrapper>
+    </ThemeProvider>
+  );
+}
+
+describe('DocumentWrapper', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('accessibility', () => {
+    it('should render links with underline text decoration for accessibility', () => {
+      const { container } = render(
+        <ThemedDocumentWrapper>
+          <p>
+            This is a paragraph with a <a href="https://example.com">link</a> inside.
+          </p>
+        </ThemedDocumentWrapper>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render links with underline in dark theme', () => {
+      const { container } = render(
+        <ThemeProvider theme={convert(themes.dark)}>
+          <DocumentWrapper>
+            <p>
+              This is a paragraph with a <a href="https://example.com">link</a> inside.
+            </p>
+          </DocumentWrapper>
+        </ThemeProvider>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render multiple links with underlines in text blocks', () => {
+      const { container } = render(
+        <ThemedDocumentWrapper>
+          <div>
+            <p>
+              Check out <a href="https://example.com">this link</a> and also{' '}
+              <a href="https://another.com">this other link</a>.
+            </p>
+            <p>
+              Here is <a href="https://third.com">a third link</a> in another paragraph.
+            </p>
+          </div>
+        </ThemedDocumentWrapper>
+      );
+
+      const links = container.querySelectorAll('a');
+      expect(links).toHaveLength(3);
+
+      links.forEach((link) => {
+        const styles = window.getComputedStyle(link);
+        expect(styles.textDecoration).toContain('underline');
+      });
+    });
+  });
+});
diff --git a/code/core/src/components/components/typography/DocumentWrapper.tsx b/code/core/src/components/components/typography/DocumentWrapper.tsx
index b5b4cca5eccb..25a91f33b3b7 100644
--- a/code/core/src/components/components/typography/DocumentWrapper.tsx
+++ b/code/core/src/components/components/typography/DocumentWrapper.tsx
@@ -64,7 +64,10 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
   },
   a: {
     color: theme.color.secondary,
-    textDecoration: 'none',
+    // Ensure WCAG Level A compliance (SC 1.4.1), see https://www.w3.org/WAI/WCAG22/Techniques/failures/F73
+    textDecoration: 'underline',
+    textDecorationThickness: '0.03125rem',
+    textUnderlineOffset: '0.11em',
   },
   'a.absent': {
     color: '#cc0000',
@@ -78,6 +81,10 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
     top: 0,
     left: 0,
     bottom: 0,
+    textDecoration: 'none',
+  },
+  '&.anchor:hover, &.anchor:focus': {
+    textDecoration: 'underline',
   },
   'h1, h2, h3, h4, h5, h6': {
     margin: '20px 0 10px',
diff --git a/code/core/src/components/components/typography/elements/A.test.tsx b/code/core/src/components/components/typography/elements/A.test.tsx
new file mode 100644
index 000000000000..cbb638ca8d5c
--- /dev/null
+++ b/code/core/src/components/components/typography/elements/A.test.tsx
@@ -0,0 +1,75 @@
+// @vitest-environment happy-dom
+import { cleanup, render } from '@testing-library/react';
+import { afterEach, describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/theming';
+
+import { A } from './A';
+
+function ThemedA({ children, ...props }: React.ComponentProps<typeof A>) {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <A {...props}>{children}</A>
+    </ThemeProvider>
+  );
+}
+
+describe('A', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('accessibility', () => {
+    it('should render with underline text decoration for accessibility', () => {
+      const { container } = render(<ThemedA href="https://example.com">Test Link</ThemedA>);
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should render with underline in dark theme', () => {
+      const { container } = render(
+        <ThemeProvider theme={convert(themes.dark)}>
+          <A href="https://example.com">Test Link</A>
+        </ThemeProvider>
+      );
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+    });
+
+    it('should not underline anchor position markers (a.anchor)', () => {
+      const { container } = render(
+        <ThemedA href="#heading" className="anchor">
+          Anchor Link
+        </ThemedA>
+      );
+
+      const link = container.querySelector('a.anchor');
+      expect(link).toBeTruthy();
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).not.toContain('underline');
+    });
+
+    it('should render with correct color and styling', () => {
+      const { container } = render(<ThemedA href="https://example.com">Link Text</ThemedA>);
+
+      const link = container.querySelector('a');
+      expect(link).toBeTruthy();
+      expect(link?.textContent).toBe('Link Text');
+
+      const styles = window.getComputedStyle(link!);
+      expect(styles.textDecoration).toContain('underline');
+      expect(styles.fontSize).toBe('inherit');
+    });
+  });
+});
diff --git a/code/core/src/components/components/typography/elements/A.tsx b/code/core/src/components/components/typography/elements/A.tsx
index e91833da6cfc..9ab4e9bf03b2 100644
--- a/code/core/src/components/components/typography/elements/A.tsx
+++ b/code/core/src/components/components/typography/elements/A.tsx
@@ -8,7 +8,10 @@ export const A = styled(Link)(withReset, ({ theme }) => ({
   lineHeight: '24px',
 
   color: theme.color.secondary,
-  textDecoration: 'none',
+  // Ensure WCAG Level A compliance (SC 1.4.1), see https://www.w3.org/WAI/WCAG22/Techniques/failures/F73
+  textDecoration: 'underline',
+  textDecorationThickness: '0.03125rem',
+  textUnderlineOffset: '0.11em',
   '&.absent': {
     color: '#cc0000',
   },
@@ -21,5 +24,9 @@ export const A = styled(Link)(withReset, ({ theme }) => ({
     top: 0,
     left: 0,
     bottom: 0,
+    textDecoration: 'none',
+  },
+  '&.anchor:hover, &.anchor:focus': {
+    textDecoration: 'underline',
   },
 }));
diff --git a/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx b/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx
index 70fcc2a9777c..923c1a47dc93 100644
--- a/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx
+++ b/code/frameworks/nextjs-vite/template/cli/js/Configure.mdx
@@ -52,6 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -67,6 +68,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -85,6 +87,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -113,6 +116,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -128,6 +132,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -144,6 +149,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -160,6 +166,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -175,6 +182,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -190,6 +198,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -202,6 +211,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
+        className="sb-action-link"
         href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
@@ -229,6 +239,7 @@ export const RightArrow = () => <svg
       Join our contributors building the future of UI development.
 
       <a
+        className="sb-action-link"
         href="https://github.com/storybookjs/storybook"
         target="_blank"
       >Star on GitHub<RightArrow /></a>
@@ -246,6 +257,7 @@ export const RightArrow = () => <svg
         Get support and chat with frontend developers.
 
         <a
+          className="sb-action-link"
           href="https://discord.gg/storybook"
           target="_blank"
         >Join Discord server<RightArrow /></a>
@@ -264,6 +276,7 @@ export const RightArrow = () => <svg
         Watch tutorials, feature previews and interviews.
 
         <a
+          className="sb-action-link"
           href="https://www.youtube.com/@chromaticui"
           target="_blank"
         >Watch on YouTube<RightArrow /></a>
@@ -281,6 +294,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
+          className="sb-action-link"
           href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
@@ -328,6 +342,16 @@ export const RightArrow = () => <svg
     padding-bottom: 10px;
   }
 
+  .sb-action-link {
+    text-decoration: none;
+  }
+
+  .sb-action-link:hover, .sb-action-link:focus {
+    text-decoration: underline;
+    text-decoration-thickness: 0.03125rem;
+    text-underline-offset: 0.11em;
+  }
+
   .sb-chevron {
     margin-left: 5px;
   }
diff --git a/code/frameworks/nextjs/template/cli/js/Configure.mdx b/code/frameworks/nextjs/template/cli/js/Configure.mdx
index 70fcc2a9777c..923c1a47dc93 100644
--- a/code/frameworks/nextjs/template/cli/js/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/js/Configure.mdx
@@ -52,6 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -67,6 +68,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -85,6 +87,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -113,6 +116,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -128,6 +132,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -144,6 +149,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -160,6 +166,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -175,6 +182,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -190,6 +198,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -202,6 +211,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
+        className="sb-action-link"
         href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
@@ -229,6 +239,7 @@ export const RightArrow = () => <svg
       Join our contributors building the future of UI development.
 
       <a
+        className="sb-action-link"
         href="https://github.com/storybookjs/storybook"
         target="_blank"
       >Star on GitHub<RightArrow /></a>
@@ -246,6 +257,7 @@ export const RightArrow = () => <svg
         Get support and chat with frontend developers.
 
         <a
+          className="sb-action-link"
           href="https://discord.gg/storybook"
           target="_blank"
         >Join Discord server<RightArrow /></a>
@@ -264,6 +276,7 @@ export const RightArrow = () => <svg
         Watch tutorials, feature previews and interviews.
 
         <a
+          className="sb-action-link"
           href="https://www.youtube.com/@chromaticui"
           target="_blank"
         >Watch on YouTube<RightArrow /></a>
@@ -281,6 +294,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
+          className="sb-action-link"
           href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
@@ -328,6 +342,16 @@ export const RightArrow = () => <svg
     padding-bottom: 10px;
   }
 
+  .sb-action-link {
+    text-decoration: none;
+  }
+
+  .sb-action-link:hover, .sb-action-link:focus {
+    text-decoration: underline;
+    text-decoration-thickness: 0.03125rem;
+    text-underline-offset: 0.11em;
+  }
+
   .sb-chevron {
     margin-left: 5px;
   }
diff --git a/code/frameworks/nextjs/template/cli/ts/Configure.mdx b/code/frameworks/nextjs/template/cli/ts/Configure.mdx
index 70fcc2a9777c..923c1a47dc93 100644
--- a/code/frameworks/nextjs/template/cli/ts/Configure.mdx
+++ b/code/frameworks/nextjs/template/cli/ts/Configure.mdx
@@ -52,6 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -67,6 +68,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -85,6 +87,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -113,6 +116,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -128,6 +132,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -144,6 +149,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -160,6 +166,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -175,6 +182,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -190,6 +198,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/theming/?renderer=react&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -202,6 +211,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
+        className="sb-action-link"
         href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
@@ -229,6 +239,7 @@ export const RightArrow = () => <svg
       Join our contributors building the future of UI development.
 
       <a
+        className="sb-action-link"
         href="https://github.com/storybookjs/storybook"
         target="_blank"
       >Star on GitHub<RightArrow /></a>
@@ -246,6 +257,7 @@ export const RightArrow = () => <svg
         Get support and chat with frontend developers.
 
         <a
+          className="sb-action-link"
           href="https://discord.gg/storybook"
           target="_blank"
         >Join Discord server<RightArrow /></a>
@@ -264,6 +276,7 @@ export const RightArrow = () => <svg
         Watch tutorials, feature previews and interviews.
 
         <a
+          className="sb-action-link"
           href="https://www.youtube.com/@chromaticui"
           target="_blank"
         >Watch on YouTube<RightArrow /></a>
@@ -281,6 +294,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
+          className="sb-action-link"
           href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
@@ -328,6 +342,16 @@ export const RightArrow = () => <svg
     padding-bottom: 10px;
   }
 
+  .sb-action-link {
+    text-decoration: none;
+  }
+
+  .sb-action-link:hover, .sb-action-link:focus {
+    text-decoration: underline;
+    text-decoration-thickness: 0.03125rem;
+    text-underline-offset: 0.11em;
+  }
+
   .sb-chevron {
     margin-left: 5px;
   }
diff --git a/code/lib/create-storybook/rendererAssets/common/Configure.mdx b/code/lib/create-storybook/rendererAssets/common/Configure.mdx
index 948e410a08b0..76966acfead3 100644
--- a/code/lib/create-storybook/rendererAssets/common/Configure.mdx
+++ b/code/lib/create-storybook/rendererAssets/common/Configure.mdx
@@ -48,6 +48,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/configure/styling-and-css/?renderer={{renderer}}&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -60,6 +61,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/writing-stories/decorators/?renderer={{renderer}}&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -72,6 +74,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/images-and-assets/?renderer={{renderer}}&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -94,6 +97,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer={{renderer}}&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -103,6 +107,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer={{renderer}}&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -113,6 +118,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/design-integrations/?renderer={{renderer}}&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -123,6 +129,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/?renderer={{renderer}}&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -132,6 +139,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer={{renderer}}&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -141,6 +149,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/theming/?renderer={{renderer}}&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -153,6 +162,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
+        className="sb-action-link"
         href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
@@ -168,6 +178,7 @@ export const RightArrow = () => <svg
       Join our contributors building the future of UI development.
 
       <a
+        className="sb-action-link"
         href="https://github.com/storybookjs/storybook"
         target="_blank"
       >Star on GitHub<RightArrow /></a>
@@ -178,6 +189,7 @@ export const RightArrow = () => <svg
         Get support and chat with frontend developers.
 
         <a
+          className="sb-action-link"
           href="https://discord.gg/storybook"
           target="_blank"
         >Join Discord server<RightArrow /></a>
@@ -189,6 +201,7 @@ export const RightArrow = () => <svg
         Watch tutorials, feature previews and interviews.
 
         <a
+          className="sb-action-link"
           href="https://www.youtube.com/@chromaticui"
           target="_blank"
         >Watch on YouTube<RightArrow /></a>
@@ -199,6 +212,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
+          className="sb-action-link"
           href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
@@ -246,6 +260,16 @@ export const RightArrow = () => <svg
     padding-bottom: 10px;
   }
 
+  .sb-action-link {
+    text-decoration: none;
+  }
+
+  .sb-action-link:hover, .sb-action-link:focus {
+    text-decoration: underline;
+    text-decoration-thickness: 0.03125rem;
+    text-underline-offset: 0.11em;
+  }
+
   .sb-chevron {
     margin-left: 5px;
   }
diff --git a/test-storybooks/yarn-pnp/src/stories/Configure.mdx b/test-storybooks/yarn-pnp/src/stories/Configure.mdx
index 34a34ea9e3e0..f6f322ac69db 100644
--- a/test-storybooks/yarn-pnp/src/stories/Configure.mdx
+++ b/test-storybooks/yarn-pnp/src/stories/Configure.mdx
@@ -48,6 +48,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=vue&ref=configure"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -60,6 +61,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
+        className="sb-action-link"
         href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=vue&ref=configure#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
@@ -72,6 +74,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=vue&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -94,6 +97,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=vue&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -103,6 +107,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=vue&ref=configure#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -113,6 +118,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=vue&ref=configure#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -123,6 +129,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/?renderer=vue&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -132,6 +139,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=vue&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -141,6 +149,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
+          className="sb-action-link"
           href="https://storybook.js.org/docs/configure/theming/?renderer=vue&ref=configure"
           target="_blank"
         >Learn more<RightArrow /></a>
@@ -153,6 +162,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
+        className="sb-action-link"
         href="https://storybook.js.org/addons/?ref=configure"
         target="_blank"
       >Discover all addons<RightArrow /></a>
@@ -168,6 +178,7 @@ export const RightArrow = () => <svg
       Join our contributors building the future of UI development.
 
       <a
+        className="sb-action-link"
         href="https://github.com/storybookjs/storybook"
         target="_blank"
       >Star on GitHub<RightArrow /></a>
@@ -178,6 +189,7 @@ export const RightArrow = () => <svg
         Get support and chat with frontend developers.
 
         <a
+          className="sb-action-link"
           href="https://discord.gg/storybook"
           target="_blank"
         >Join Discord server<RightArrow /></a>
@@ -189,6 +201,7 @@ export const RightArrow = () => <svg
         Watch tutorials, feature previews and interviews.
 
         <a
+          className="sb-action-link"
           href="https://www.youtube.com/@chromaticui"
           target="_blank"
         >Watch on YouTube<RightArrow /></a>
@@ -199,6 +212,7 @@ export const RightArrow = () => <svg
       <p>Follow guided walkthroughs on for key workflows.</p>
 
       <a
+          className="sb-action-link"
           href="https://storybook.js.org/tutorials/?ref=configure"
           target="_blank"
         >Discover tutorials<RightArrow /></a>
@@ -246,6 +260,16 @@ export const RightArrow = () => <svg
     padding-bottom: 10px;
   }
 
+  .sb-action-link {
+    text-decoration: none;
+  }
+
+  .sb-action-link:hover, .sb-action-link:focus {
+    text-decoration: underline;
+    text-decoration-thickness: 0.03125rem;
+    text-underline-offset: 0.11em;
+  }
+
   .sb-chevron {
     margin-left: 5px;
   }