用css伪元素制作箭头图标

最新推荐文章于 2025-04-06 19:02:52 发布

转载最新推荐文章于 2025-04-06 19:02:52 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/ytyjm/blog/3040807

文章标签：

#前端框架

本文介绍如何使用CSS伪元素:before创建跳转箭头图标，替代传统图片，优化前端页面加载速度。通过设置特定的样式属性，如border和transform，实现自定义图标效果。

用css伪元素制作跳转箭头图标

在一些前端框架中见到过伪元素做的图标，现在一般都自己写了，用伪元素可以代替不少图片

.yui-cell{
position: relative;
}
.yui-cell:before{
  content: " ";
  display: inline-block;
  height: 0.7em;
  width: 0.5em;
  border-width: 1px 1px 0 0;
  border-color: #323232;
  border-style: solid;
  -webkit-transform: matrix(.51,.51,-0.51,.51,0,0);
  transform: matrix(.51,.51,-0.51,.51,0,0);
  position: absolute;
  top: 31%;
  left: 0;
}

转载于:https://my.oschina.net/ytyjm/blog/3040807