css伪元素

• ::before表示在该元素内部的最前面插入一个元素
• ::after表示在该元素内部的最后面插入一个元素

<标签 class=“类名”> （这里是元素内部的最前面） 内容 （这里是元素内部的最后面） </标签>

.类名::before{ display:block; content:""; }

效果图：（伪元素来实现分割线）

HTML

<div class="channel_list">
                <div class="channel_items row col">
                    <a href="#">
                        <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                        <p>保障服务</p>
                    </a>
                </div>
                <div class="channel_items row col">
                    <a href="#">
                        <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                        <p>保障服务</p>
                    </a>
                </div>
                <div class="channel_items row">
                    <a href="#">
                        <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                        <p>保障服务</p>
                    </a>
                </div>
                <div class="channel_items col">
                    <a href="#">
                        <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                        <p>保障服务</p>
                    </a>
                </div>
                <div class="channel_items col">
                    <a href="#">
                        <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                        <p>保障服务</p>
                    </a>
                </div>
                <div class="channel_items col">
                    <a href="#">
                        <img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="">
                        <p>保障服务</p>
                    </a>
                </div>
            </div>

CSS

.channel_list{
    width: 228px;
    height: 164px;
    padding: 3px;
    background-color: #5f5750;
    float: left;
}
.channel_items{
    width: 70px;
    height: 82px;
    font-size: 12px;
    padding: 0 3px;
    float: left;
    color: #fff;
    position: relative;
}
.row::before, .col::after{
    display: block;
    content: "";
    background-color: #645c55;
    position: absolute;
}
.row::before{
    height: 1px;
    width: 64px;
    bottom: 0px;
    left: 6px;
}
.col::after{
    width: 1px;
    height: 70px;
    right: 0;
    top: 6px;
}
.channel_items a{
    display: inline-block;
    margin-top: 18px;
    color: #fff;
    opacity: 0.7;
}
.channel_items a:hover{
    opacity: 1;
}
.channel_items img{
    width: 24px;
    height: 24px;
    margin-bottom: 5px;
}