Css Block

实现“登录 | 注册”效果

登录注册

<a>登录</a><a>注册</a>
1
a + a:before {
    content: "";
    font-size: 0;
    padding: 10px 3px 1px;
    margin-left: 6px;
    border-left: 1px solid gray;
}
a + a:before {
    content: "";
    border-left: 1px solid gray;
}
1
2
3
4
5
6
7
8
9
10
11

如果不加font-size: 0，最终结果就是：“登录 | 注册”（| 的高度是文字高度）。因为内联元素高度默认由 font-size 控制。我们希望 | 的高度能够小一些，因此将 font-size设置为 0，用 border 控制高度。在 padding 为 0 时 border 在注册的左下方：“登录 . 注册”。padding-top 使其向上延伸，padding-bottom 使其向下延伸。

← 图片加载优化 →