如何用css after before伪类写一个列表icon图标？

如图所示，如何用css伪类实现？先自己思考着写一下代码，看看自己是否能做出来？

下面附上答案：

<div class="txm-map"><span></span></div>

 /* -------css代码部分------- */
        .txm-map{
            border: #C03C42 2px solid;
            width: 40px;
            height:40px;
            cursor: pointer;
            position: relative;
        }
        .txm-map span{
            display: block;
            width: 16px;
            height: 2px;
            background: #C03C42;
            position: absolute;
            right: 7px;
            top:50%;
            transition: ease .45s;
        }
        .txm-map span::before{
            content:'';
            display: block;
            width: 22px;
            height:2px;
            background: #C03C42;
            position: absolute;
            right: 0;
            top:-8px;
            transition: ease .45s;
        }
        .txm-map span::after{
            content:'';
            display: block;
            width: 22px;
            height:2px;
            background: #C03C42;
            position: absolute;
            right: 0;
            top:8px;
            transition: ease .45s;
        }
        .txm-map:hover span{
            width: 22px;
        }
        .txm-map:hover span::after{
            width: 16px;
        }
        .txm-map:hover span::before{
            width: 16px;
        }
        /* -------------- */

简单的列表icon图标效果就做出来啦，是不是很简单？