Posted on Feb 10, 2018 • Originally published at washingtonsteven.net on Sep 11, 2017

Snippet: All-CSS (scss) Arrow Circles for Your Pagination Needs

So I just did this for my site and thought it was a fun and simple snippet to share. Nothing too fancy, but using only CSS for something presentational just makes me giddy!

So here’s the markup:

<span class="page-link prev"><a href="/prev"></a></span> <span class="page-link next"><a href="/next"></a></span>

Easy! Only slightly weird thing is that there is no text in the a tags. We would probably want to add a title attribute to the tag to make sure everyone knows what we are talking about.

And the magic! In Sass (scss) because we’re being all modern: (explanation in comments)

$circle_diameter: 50px; $dark_gray: rgba(74, 77, 81, 1); $yellow: rgba(255, 199, 0, 1); .page-link { a { // We will make this empty a tag a circle // Set equal width and height. width: $circle_diameter; height: $circle_diameter; // This curves in the corners to make a circle. border-radius:50%; // Make it look nice. background-color:$yellow; // We're going to be doing some funky positioning stuff! position:relative; // Yes! We are using both :before and :after pseudoclasses! Each will be a "leg" of the arrow &:before, &:after { // Gotta have this to make the pseudoclasses work. content:""; // You can mess with these values to change how thick and long the arrow legs are. // But you will have to mess with positioning below, as well. width:30%; height:12%; // Something to contrast the $yellow. background-color:$dark_gray; // Here it comes... position:absolute; // Oh, just center it.  // transform will take care of fine tuning the positioning. top:50%; left:50%; } } // Here's all the crazy positioning stuff, handled by the "transform" directive. // :before becomes the top of the arrow, and :after is the bottom (see the second param of translate()). // Note how the values flip between .prev and .next (and the first param in translate value flipping over -50%)! // You can tweak these values to make different angles of arrows!  // But if you do you will probably have to change the size of the legs above. &.prev { a:before{ transform:translate(-60%, -100%) rotate(-45deg); } a:after { transform:translate(-60%, 0) rotate(45deg); } } // Second verse, same as the first! &.next { a:before{ transform:translate(-40%, -100%) rotate(45deg); } a:after { transform:translate(-40%, 0) rotate(-45deg); } } }