正文

css实现文字加垂直竖线

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0917

方法一：直接在文字后面+“|”

 

方法二： border-right来实现（不可操作竖线高度）

    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #6598c7;

　　

方法三：伪类实现

.content {
      &:after {
           content: "";
           margin-left: 15px;
           padding-left: 15px;
           border-left: 1px solid #ccc;
           height: 12px;
           display: inline-block;
           vertical-align: middle;
       }
  }

　　

方法四：定位元素

.content {
	&:before {
	    content: "";
	    width: 1px;
	    height: 50%;
	    position: absolute;
	    top: 25%;
	    left: 0;
	    background: #ccc;
	}
}