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);
    }
  }
}

The :before and :after pseudoclasses are a lifesaver here.

And here’s what it all looks like in the end:

Well, at least I think it’s pretty neat.

This post was originally published on washingtonsteven.net