css水平垂直分割线美化

网页前端
231 0

html代码

<!-- 分割线 -->
<div class="sv-divider sv-divider--horizontal">
    <div class="sv-divider__text is-center">周董</div>
</div>
<div class="sv-divider sv-divider--horizontal">
    <div class="sv-divider__text is-left">周董</div>
</div>
<div class="sv-divider sv-divider--horizontal">
    <div class="sv-divider__text is-right">周董</div>
</div>
<div class="sv-divider sv-divider--horizontal">
    <div class="sv-divider__text"></div>
</div>
<div>
    <!-- 垂直分割线 -->
    <span>菊花台</span>
    <div class="sv-divider sv-divider--vertical">
    </div> <span>东风破</span>
    <div class="sv-divider sv-divider--vertical">
    </div> <span>晴天</span>
</div>

css代码

transform:translateY(-50%);
}
.sv-divider__text.is-center {
    left:50%;
    transform:translateX(-50%) translateY(-50%);
}
.sv-divider__text {
    position:absolute;
    background-color:#fff;
    padding:0 20px;
    font-weight:500;
    color:#303133;
    font-size:14px;
}
.sv-divider--vertical {
    display:inline-block;
    width:1px;
    height:1em;
    margin:0 8px;
    vertical-align:middle;
    position:relative;
}
.sv-divider {
    background-color:#dcdfe6;
    position:relative;
}

请输入图片描述

最后更新 2022-02-12
评论 ( 0 )
OωO
隐私评论