css实现文字加垂直竖线


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

 

方法二: 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;
	}
}

  


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM