CSS右箭头的写法

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;
              }
            }

效果:

CSS右箭头的写法_第1张图片

你可能感兴趣的:(css,css)