diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 64c3366cdd..723dc23f18 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -1135,6 +1135,7 @@ kbd {
 
 /* Finishing touches */
 /* ---------------------------------------------------- */
+
 .gh-done {
     background: #15171A;
 }
@@ -1292,4 +1293,25 @@ kbd {
 
 .gh-input-group-tier-trial-disabled .gh-input-append:before {
     background: #0e0f11;
+}
+
+
+/* Settings Links */
+
+.kg-settings-link-url::before {
+    background: rgb(28,30,33);
+    background: linear-gradient(90deg, rgba(28,30,33,1) 0%, rgba(28,30,33,0) 100%);
+}
+
+.kg-settings-link-url::after {
+    background: rgb(28,30,33);
+    background: linear-gradient(90deg, rgba(28,30,33,0) 0%, rgba(28,30,33,1) 100%);
+}
+
+.ember-power-select-option[aria-current="true"] .kg-settings-link-url.scroller::before {
+    background: linear-gradient(90deg, rgba(19,20,22,1) 0%, rgba(19,20,22,0) 100%);
+}
+
+.ember-power-select-option[aria-current="true"] .kg-settings-link-url::after {
+    background: linear-gradient(90deg, rgba(19,20,22,0) 0%, rgba(19,20,22,1) 100%);
 }
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/editor.css b/ghost/admin/app/styles/layouts/editor.css
index 9056fb8783..f744bcbcd3 100644
--- a/ghost/admin/app/styles/layouts/editor.css
+++ b/ghost/admin/app/styles/layouts/editor.css
@@ -1013,10 +1013,59 @@ figure {
 }
 
 .kg-settings-link-url {
+    position: relative;
     display: block;
+    width: 100%;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    text-align: left;
+}
+
+.kg-settings-link-url::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -20px;
+    width: 20px;
+    height: 100%;
+    background: rgb(255,255,255);
+    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+    z-index: 999;
+    opacity: 0;
+    transition: all 250ms ease-out;
+}
+
+.kg-settings-link-url::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 100%;
+    background: rgb(255,255,255);
+    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
+    z-index: 999;
+}
+
+.ember-power-select-option[aria-current="true"] .kg-settings-link-url.scroller::before {
+    opacity: 1;
+    left: 0;
+    background: linear-gradient(90deg, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
+}
+
+.ember-power-select-option[aria-current="true"] .kg-settings-link-url::after {
+    background: linear-gradient(90deg, rgba(244,245,245,0) 0%, rgba(244,245,245,1) 100%);
+}
+
+.kg-settings-link-url > span {
+    display: inline-block;
     font-weight: 400;
     font-size: 1.2rem;
     color: var(--midgrey);
     letter-spacing: 0;
     line-height: 1.3em;
-}
\ No newline at end of file
+    transition: transform 250ms ease-in-out;
+    transform: translateX(0); /* used for dynamic positioning with js */
+    padding-right: 8px; /* extra padding used for dynamic positioning with js */
+}
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.hbs
index 12a93c0db4..63ec52e771 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.hbs
@@ -84,7 +84,7 @@
                         as |suggestion|
                     >
                         <span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
-                        <span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
+                        <span class="kg-settings-link-url" {{on "mouseenter" this.enterLinkURL}} {{on "mouseleave" this.leaveLinkURL}}><span>{{suggestion.url}}</span></span>
                     </GhInputWithSelect>
                 </div>
             </div>
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js
index 038fac7c13..1aad511b7d 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-button.js
@@ -18,6 +18,8 @@ export default class KoenigCardButtonComponent extends Component {
     @tracked contentFocused = false;
     @tracked offers = null;
 
+    linkScrollerTimeout = null; // needs to be global so can be cleared when needed across functions
+
     get isEmpty() {
         const {buttonText, buttonUrl} = this.args.payload;
 
@@ -135,6 +137,32 @@ export default class KoenigCardButtonComponent extends Component {
         document.querySelector(selector)?.focus();
     }
 
+    @action
+    enterLinkURL(event) {
+        event.stopPropagation();
+        const parent = event.target;
+        const child = event.target.querySelector('span');
+
+        clearTimeout(this.linkScrollerTimeout);
+        if (child.offsetWidth > parent.offsetWidth) {
+            this.linkScrollerTimeout = setTimeout(() => {
+                parent.classList.add('scroller');
+                child.style.transform = `translateX(-${(child.offsetWidth - parent.offsetWidth) + 8}px)`;
+            }, 100);
+        }
+    }
+
+    @action
+    leaveLinkURL(event) {
+        event.stopPropagation();
+        clearTimeout(this.linkScrollerTimeout);
+        const parent = event.target;
+        const child = event.target.querySelector('span');
+
+        child.style.transform = 'translateX(0)';
+        parent.classList.remove('scroller');
+    }
+
     @task({restartable: true})
     *fetchOffersTask() {
         this.offers = yield this.store.query('offer', {limit: 'all', filter: 'status:active'});
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
index bd7268199d..8a8cb608f5 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.hbs
@@ -148,7 +148,7 @@
                             as |suggestion|
                         >
                             <span class="kg-settings-link-title" title="{{suggestion.name}}">{{suggestion.name}}</span>
-                            <span class="kg-settings-link-url" title="{{suggestion.url}}">{{suggestion.url}}</span>
+                            <span class="kg-settings-link-url" {{on "mouseenter" this.enterLinkURL}} {{on "mouseleave" this.leaveLinkURL}}><span>{{suggestion.url}}</span></span>
                         </GhInputWithSelect>
                     </div>
                 </div>
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
index 475f928e63..d46168c0d8 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-email-cta.js
@@ -24,6 +24,7 @@ export default class KoenigCardEmailCtaComponent extends Component {
 
     buttonTextInputId = 'button-text-input-' + guidFor(this);
     urlInputId = 'url-input-' + guidFor(this);
+    linkScrollerTimeout = null; // needs to be global so can be cleared when needed across functions
 
     get isEmpty() {
         const {html, showButton, buttonText, buttonUrl} = this.args.payload;
@@ -215,6 +216,32 @@ export default class KoenigCardEmailCtaComponent extends Component {
         document.querySelector(selector)?.focus();
     }
 
+    @action
+    enterLinkURL(event) {
+        event.stopPropagation();
+        const parent = event.target;
+        const child = event.target.querySelector('span');
+
+        clearTimeout(this.linkScrollerTimeout);
+        if (child.offsetWidth > parent.offsetWidth) {
+            this.linkScrollerTimeout = setTimeout(() => {
+                parent.classList.add('scroller');
+                child.style.transform = `translateX(-${(child.offsetWidth - parent.offsetWidth) + 8}px)`;
+            }, 100);
+        }
+    }
+
+    @action
+    leaveLinkURL(event) {
+        event.stopPropagation();
+        clearTimeout(this.linkScrollerTimeout);
+        const parent = event.target;
+        const child = event.target.querySelector('span');
+
+        child.style.transform = 'translateX(0)';
+        parent.classList.remove('scroller');
+    }
+
     @task({restartable: true})
     *fetchOffersTask() {
         this.offers = yield this.store.query('offer', {limit: 'all', filter: 'status:active'});