- 内容
<!-- 标题前边加空格是为了与竖杠分开 -->
<div class="title"> 标题</div>
- 样式(竖杠居中)
.title {
position: relative;
height: 60px;
margin-left: 8px;
font-size: 18px;
font-weight:700 ;
line-height: 60px;
&::before{
position: absolute;
top: 50%;
left: 0;
display:block ;
width: 5px;
height: 30px;
background-color: #168DE9;
border-radius: 2px;
content:'';
transform: translateY(-50%); }
}
- 实现效果