上传图片的样式

最新推荐文章于 2023-06-30 11:41:09 发布

Khun_HWJ

最新推荐文章于 2023-06-30 11:41:09 发布

阅读量941

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/Khun_HWJ/article/details/109029735

css 专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现简洁+号图标的技巧。通过:before和:after伪元素结合绝对定位，轻松实现了响应式的+号图标效果，并且具备hover状态颜色变化功能。

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

在这里插入图片描述

<a href class="add" title="继续上传">
  添加图片
</a>

里面 + 号的css写法

.add {
    display: inline-block;
    width: 76px; height: 76px;
    color: #ccc;
    border: 2px dashed;
    text-indent: -12em;
    transition: color .25s;
    position: relative;
    overflow: hidden;
}
.add:hover {
    color: #34538b;
}
.add::before, .add::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
}
.add::before {
    width: 20px;
    border-top: 4px solid;
    margin: -2px 0 0 -10px;
}
.add::after {
    height: 20px;
    border-left: 4px solid;
    margin: -10px 0 0 -2px;
}