css中指示下一页的方向箭头

在现代web设计中，箭头已经成为了一个非常重要的元素，而在CSS中，指示下一页的方向箭头也是一个非常常见的设计。

.next-page {
    border: 1px solid black;
    padding: 10px;
    display: inline-block; /* 当作块级元素且居中 */
    text-align: center;
    border-radius: 25px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.next-page:hover {
    background-color: #333;
    color: white;
    transform: scale(1.1);
}

.next-page:before {
    content: ""; /* 伪元素，此处为空 */
    display: inline-block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid black;
    margin-right: 10px;
    transform: translateY(-2px); /* 使其与文字居中 */
} 

上面的代码使用了:before伪元素来实现箭头的设计，使用三角形的边框来进行制作，同时设置了一些效果，如鼠标悬停时的变换效果等。

这样的方向箭头不仅可以用于下一页的指示，还可以用于其他许多场合，如返回顶部等，是一种非常实用的设计元素。