css如何在div框内画上+号（加号）？

使用伪元素方式，效果如下：

全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .plus-icon {
            width: 72.22px;
            height: 72.22px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #205DA2;
            font-size: 75px;
            border-radius: 13.18px;
            border: 4.16px dashed #205DA2;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 11.1px;
        }

        .plus-icon::before {
            content: '';
            position: absolute;
            width: 31.25px;
            border-top: 4.16px solid;
        }

        .plus-icon::after {
            content: '';
            position: absolute;
            height: 31.25px;
            border-left: 4.16px solid;
        }
    </style>
</head>
<body>
<div class="plus-icon"></div>
</body>
</html>

 

posted @ 2021-08-10 09:46  一两米  阅读(987)  评论(0)  编辑  收藏  举报