CSS右箭头的写法

最新推荐文章于 2024-08-01 13:41:00 发布

Bonjours

最新推荐文章于 2024-08-01 13:41:00 发布

阅读量3.5k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/124382381

版权

css 专栏收录该内容

21 篇文章

订阅专栏

这篇博客探讨了如何使用CSS创建一个6px的旋转元素，同时详细介绍了内联元素的样式设置，包括边框、旋转及悬停时的透明度变化。通过span伪元素的应用，实现了鼠标悬停时增强视觉效果的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css：

width: 6px;
height: 6px;
border-top: 1px solid #cccccc;
border-right: 1px solid #cccccc;
transform: rotate(45deg);

        span {
              padding-left: 5px;
              padding-right: 7px;
              color: @primary-color;
              font-size: 12px;
              opacity: 0.6;
              position: relative;
              &::after{
                position: absolute;
                content: '';
                width: 5px;
                height: 5px;
                border-top: 1px solid @primary-color;
                border-right: 1px solid @primary-color;
                transform: rotate(45deg);
                right: 1px;
                top: 6px;
              }
              &:hover{
                opacity: 1;
              }
            }

效果：