DEV Community

Steven Washington
Steven Washington

Posted on • Originally published at washingtonsteven.net on

6

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>
Enter fullscreen mode Exit fullscreen mode

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);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay