diff --git a/core/modules/shortcut/css/shortcut.icons.theme.css b/core/modules/shortcut/css/shortcut.icons.theme.css
index 54569c2e48d117e723450fabc9a6ba7dc5668dd5..99812fdc22803ea5eee33aca99fa2ee5bdd7ac98 100644
--- a/core/modules/shortcut/css/shortcut.icons.theme.css
+++ b/core/modules/shortcut/css/shortcut.icons.theme.css
@@ -17,24 +17,24 @@
 /**
  * Add/remove links.
  */
-.add-or-remove-shortcuts .icon {
+.shortcut-action__icon {
   background: transparent url(../images/favstar.svg) no-repeat left top;
   width: 20px;
   height: 20px;
   display: inline-block;
   vertical-align: -2px;
 }
-[dir="rtl"] .add-or-remove-shortcuts .icon {
+[dir="rtl"] .shortcut-action__icon {
   background-image: url(../images/favstar-rtl.svg);
 }
-.add-shortcut a:hover .icon,
-.add-shortcut a:focus .icon {
+.shortcut-action--add:hover .shortcut-action__icon,
+.shortcut-action--add:focus .shortcut-action__icon {
   background-position: -20px top;
 }
-.remove-shortcut .icon {
+.shortcut-action--remove .shortcut-action__icon {
   background-position: -40px top;
 }
-.remove-shortcut a:focus .icon,
-.remove-shortcut a:hover .icon {
+.shortcut-action--remove:focus .shortcut-action__icon,
+.shortcut-action--remove:hover .shortcut-action__icon {
   background-position: -60px top;
 }
diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css
index 5b22f828b9a4075927c5d074b34af6cc7f075d61..73d58c6d46529532727c6105abf30b17045bb42d 100644
--- a/core/modules/shortcut/css/shortcut.theme.css
+++ b/core/modules/shortcut/css/shortcut.theme.css
@@ -23,15 +23,15 @@
 /**
  * Add/remove links.
  */
-.add-or-remove-shortcuts {
+.shortcut-action {
   display: inline-block;
   margin-left: 0.3em; /* LTR */
 }
-[dir="rtl"] .add-or-remove-shortcuts {
+[dir="rtl"] .shortcut-action {
   margin-left: 0;
   margin-right: 0.3em;
 }
-.add-or-remove-shortcuts .text {
+.shortcut-action__message {
   background: #000000;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
@@ -49,12 +49,12 @@
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
-[dir="rtl"] .add-or-remove-shortcuts .text {
+[dir="rtl"] .shortcut-action__message {
   margin-left: 0;
   margin-right: 0.3em;
 }
-.add-or-remove-shortcuts a:hover .text,
-.add-or-remove-shortcuts a:focus .text {
+.shortcut-action:hover .shortcut-action__message,
+.shortcut-action:focus .shortcut-action__message {
   opacity: 1;
   -ms-transform: translateY(-2px);
   -webkit-transform: translateY(-2px);
diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module
index ccca313101d96bb8221e53c65e147ec324081ccf..1d5c2753977dc753af61a80116b55aa74a2669e2 100644
--- a/core/modules/shortcut/shortcut.module
+++ b/core/modules/shortcut/shortcut.module
@@ -347,12 +347,16 @@ function shortcut_preprocess_page(&$variables) {
             'shortcut/drupal.shortcut',
           ),
         ),
-        '#prefix' => '<div class="add-or-remove-shortcuts ' . $link_mode . '-shortcut">',
         '#type' => 'link',
-        '#title' => SafeMarkup::format('<span class="icon"></span><span class="text">@text</span>', array('@text' => $link_text)),
+        '#title' => SafeMarkup::format('<span class="shortcut-action__icon"></span><span class="shortcut-action__message">@text</span>', array('@text' => $link_text)),
         '#url' => Url::fromRoute($route_name, $route_parameters),
         '#options' => array('query' => $query),
-        '#suffix' => '</div>',
+        '#attributes' => array(
+          'class' => array(
+            'shortcut-action',
+            'shortcut-action--' . $link_mode,
+          ),
+        ),
       );
     }
   }
diff --git a/core/modules/shortcut/src/Tests/ShortcutLinksTest.php b/core/modules/shortcut/src/Tests/ShortcutLinksTest.php
index 3b5811f3c93289e79c9cea8be573fc39e774795c..52ec545feda30ed3c4d5b8163984f3da2cfbfbed 100644
--- a/core/modules/shortcut/src/Tests/ShortcutLinksTest.php
+++ b/core/modules/shortcut/src/Tests/ShortcutLinksTest.php
@@ -243,23 +243,23 @@ public function testNoShortcutLink() {
       ->save();
 
     $this->drupalGet('page-that-does-not-exist');
-    $result = $this->xpath('//div[contains(@class, "add-shortcut")]');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--add")]');
     $this->assertTrue(empty($result), 'Add to shortcuts link was not shown on a page not found.');
 
     // The user does not have access to this path.
     $this->drupalGet('admin/modules');
-    $result = $this->xpath('//div[contains(@class, "add-shortcut")]');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--add")]');
     $this->assertTrue(empty($result), 'Add to shortcuts link was not shown on a page the user does not have access to.');
 
-    // Verify that the testing mechanism works by verifying the shortcut
-    // link appears on admin/people.
-    $this->drupalGet('admin/people');
-    $result = $this->xpath('//div[contains(@class, "remove-shortcut")]');
+    // Verify that the testing mechanism works by verifying the shortcut link
+    // appears on admin/content.
+    $this->drupalGet('admin/content');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--remove")]');
     $this->assertTrue(!empty($result), 'Remove from shortcuts link was shown on a page the user does have access to.');
 
     // Verify that the shortcut link appears on routing only pages.
     $this->drupalGet('router_test/test2');
-    $result = $this->xpath('//div[contains(@class, "add-shortcut")]');
+    $result = $this->xpath('//a[contains(@class, "shortcut-action--add")]');
     $this->assertTrue(!empty($result), 'Add to shortcuts link was shown on a page the user does have access to.');
   }
 
diff --git a/core/themes/bartik/css/components/shortcut.css b/core/themes/bartik/css/components/shortcut.css
index 2262be82a5fe13543f187f24d72427b201ce3f57..36c28e02ebd6cffc7aaaa4d0f376947cc1ec9699 100644
--- a/core/themes/bartik/css/components/shortcut.css
+++ b/core/themes/bartik/css/components/shortcut.css
@@ -10,6 +10,6 @@
 [dir="rtl"] .shortcut-wrapper h1#page-title {
   float: right;
 }
-div.add-or-remove-shortcuts {
+.shortcut-action {
   padding-top: 0.9em;
 }
diff --git a/core/themes/bartik/css/print.css b/core/themes/bartik/css/print.css
index 58d1841d22c554c7b60a28a0dafb88ee2232dacc..248fe6e571c915d1c08a12157dfcbb1eae40e4f0 100644
--- a/core/themes/bartik/css/print.css
+++ b/core/themes/bartik/css/print.css
@@ -20,7 +20,7 @@ body {
 #toolbar,
 .site-footer,
 .tabs,
-.add-or-remove-shortcuts {
+.shortcut-action {
   display: none;
 }
 .one-sidebar #content,