diff --git a/docs/components/pagination.md b/docs/components/pagination.md
index c16f97cb6c..dacc653f7a 100644
--- a/docs/components/pagination.md
+++ b/docs/components/pagination.md
@@ -63,7 +63,7 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka
 </nav>
 {% endexample %}
 
-You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles.
+You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles.
 
 {% highlight html %}
 <nav>
@@ -152,8 +152,8 @@ Alternatively, you can align each link to the sides:
 {% example html %}
 <nav>
   <ul class="pager">
-    <li class="previous"><a href="#">Older</a></li>
-    <li class="next"><a href="#">Newer</a></li>
+    <li class="pager-prev"><a href="#">Older</a></li>
+    <li class="pager-next"><a href="#">Newer</a></li>
   </ul>
 </nav>
 {% endexample %}
@@ -166,8 +166,8 @@ Pager links also use the `.disabled` class.
 {% highlight html %}
 <nav>
   <ul class="pager">
-    <li class="previous disabled"><a href="#">Older</a></li>
-    <li class="next"><a href="#">Newer</a></li>
+    <li class="pager-prev disabled"><a href="#">Older</a></li>
+    <li class="pager-next"><a href="#">Newer</a></li>
   </ul>
 </nav>
 {% endhighlight %}
diff --git a/scss/_pager.scss b/scss/_pager.scss
index 9ae139ce72..4009c0946e 100644
--- a/scss/_pager.scss
+++ b/scss/_pager.scss
@@ -29,20 +29,6 @@
     }
   }
 
-  .next {
-    > a,
-    > span {
-      float: right;
-    }
-  }
-
-  .previous {
-    > a,
-    > span {
-      float: left;
-    }
-  }
-
   .disabled {
     > a,
     > a:hover,
@@ -54,3 +40,17 @@
     }
   }
 }
+
+.pager-next {
+  > a,
+  > span {
+    float: right;
+  }
+}
+
+.pager-prev {
+  > a,
+  > span {
+    float: left;
+  }
+}