向上的箭头在各种网页设计中经常被用到,特别是在回到顶部的按钮上。在 CSS 中,我们可以使用伪元素实现向上箭头的样式。
.arrow-up::before { content: ""; display: block; width: 0; height: 0; border-top: 8px solid black; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); }
上面这段代码中,我们使用的是 ::before 伪元素,它可以在元素的内容前面添加内容。content 属性设置了一个空内容,使得伪元素在页面上不会显示出来。然后我们使用 border 来定义箭头的形状,把左右两边设置为透明可以让箭头呈现出来尖尖的形状。通过 top 和 left 把箭头放在父元素的正中心位置,使用 transform 把箭头向上移动 8 个像素,使得箭头指向顶部。
有了这段 CSS 代码,我们就可以轻松地在需要的页面上添加回到顶部的按钮,让用户轻松地回到页面顶部。