我们平时会遇到文字后加一条分隔线，如
image.png
一般都是垂直方向居中的，很简单的一个功能
一般我们可以在父元素设置高度，然后子元素设置 line-height 为父元素高度的一半
<div class="content">
<div class="line">我是内容</div>
</div>
.content {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 100px;
background-color: #ccc;
}
.line {
line-height: 50px;
padding-right: 12px;
box-sizing: border-box;
border-right: 3px solid #000;
font-size: 16px;
font-weight: 700;
color: rgba(255,255,255,0.7);
}
这里我们设置了一个 border-right，如图所示：
image.png
网友评论