css内联元素 padding 实现的垂直分隔符

作者：Jasmine - 2020年08月27日

css内联元素 padding 实现的垂直分隔符,常用于web端头部页面显示，比如：

<style type="text/css">
a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
}
a+a:before {
    content: "";
    font-size: 0;
    padding: 10px 3px 1px;
    margin-left: 6px;
    border-left: 1px solid #ccc;
}
</style>

<a href="">登录</a><a href="">注册</a><a href="">会员中心</a><a href="">收藏首页</a>

效果：

css内联元素 padding 实现的垂直分隔符,常用于web端头部页面显示，比如：

<style type="text/css">
a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
}
a+a:before {
    content: "";
    font-size: 0;
    padding: 10px 3px 1px;
    margin-left: 6px;
    border-left: 1px solid #ccc;
}
</style>

<a href="">登录</a><a href="">注册</a><a href="">会员中心</a><a href="">收藏首页</a>

效果：

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/679

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！