描述

在很多网页中, 都会有一个小竖线的效果 (如图) . 实现这个小竖线的效果有很多种方法. 在这里记录一下.

方法

1. 通过::after

在元素后面追加一个宽度为1px的元素

.search-box .search span::after {position: absolute;right: -8px;content: "";width: 1px;height: 15px;background-color: #ccc;
}

2. 设置右边框

3. 文字

HTML页面中写一个小钩子<i>|</i>, 然后通过css为其设置属性

4. 图片