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

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay