diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index c67d1a1..4379e7b 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -185,11 +185,11 @@ abbr.form-required, abbr.tabledrag-changed, abbr.ajax-changed {
 }
 .item-list .pager li {
   background-image: none;
-  display: inline;
+  display: inline-block;
   list-style-type: none;
   padding: 0.5em;
 }
-.pager-current {
+.item-list .pager-current {
   font-weight: bold;
 }
 
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 9611ad6..0121686 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -107,9 +107,6 @@ ul,
   list-style-image: none;
   margin: 0.25em 0 0.25em 1.5em; /* LTR */
 }
-.item-list .pager li {
-  padding: 0.5em;
-}
 .item-list ul li,
 li.leaf,
 ul.menu li {
@@ -522,6 +519,47 @@ table.system-status-report tr.error {
 }
 
 /**
+ * Pagination.
+ * The item-list CSS uses quite strong selectors, we have to match them here to override.
+ */
+ .item-list .pager li {
+  color: #8c8c8c;
+  font-size: 14px;
+  padding: 0 0.6em;
+  margin: 0;
+ }
+.item-list .pager a,
+.item-list .pager .pager-current {
+  border-bottom: 2px solid transparent;
+  display: block;
+  line-height: 22px;
+  padding: 0 5px;
+  text-decoration: none !important;
+  transition: all 0.2s;
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+}
+.item-list .pager .pager-current {
+  border-bottom-width: 3px;
+  border-bottom-color: #2a678c;
+  color: #2a678c;
+  display: inline-block;
+  margin: 0 5px;
+  font-weight: 700;
+}
+.item-list .pager a:focus,
+.item-list .pager a:hover {
+  border-bottom-color: #3395d2;
+  color: #3395d2;
+}
+.item-list .pager-next a,
+.item-list .pager-last a,
+.item-list .pager-first a,
+.item-list .pager-previous a {
+  border-bottom-width: 0;
+}
+
+/**
  * Responsive tables.
  */
 @media screen and (max-width: 37.5em) { /* 600px */