css实用技巧——利用内联元素的padding实现高度可控的分隔线

<template>
    <div style="padding: 20px">
        <span>登录</span><span class="register">注册</span>
    </div>
</template>
<style scoped>
    .register:before {
        content: "";
        font-size: 0;
        padding: 10px 3px 1px;
        margin-left: 6px;
        border-left: 1px solid gray;
    }
</style>

 padding: 10px 3px 1px; 

• 上内边距是 10px
• 右内边距和左内边距是 3px
• 下内边距是 1px

通过改变 padding的上内边距和下内边距的值，即可自定义分隔线的长度（上内边距+下内边距）