怎么画竖线？ – css笔记

在平时的网页布局中，我们经常会用到竖线来进行一些有趣的分割，如果只是单纯的用符号来做，那么一些颜色、宽度、边距啥的都不怎么方便，这个时候我们可以用CSS来画一个，这些属性都可以轻松的自定义。

实际效果如下：

HTML:

<div class="nbox-main">
	<div class="nbox-yue">举杯邀明月，对影成三人。</div>
	<br>
	这段话的末尾有一条红色竖线<span></span>好了，没了
</div>

CSS:

<style type="text/css">

.nbox-main span {
	border-right: 2px solid #b52424;/*粗细、样式、颜色*/
	margin: 0 10px;/*边距*/
	padding-top: 4px;/*长度*/
}

.nbox-yue::after {
	content: "";
	border-right: 3px solid #111;/*粗细、样式、颜色*/
	margin: 0 20px;/*边距*/
	padding-top: 20px;/*长度*/
}
	
</style>