如何仅通过CSS为WordPress注册表单添加美观的分节隔断与标题

解决方案 #

你之前的实现异常是因为给伪元素设置了height: 0.5em，文字高度超过容器高度被截断，导致文字和下边框重叠。可以使用以下CSS实现需求：

/* 所有分节起始字段通用样式 */
.register_form_field.section-start {
    /* 分节顶部留白，可根据视觉需求调整数值 */
    margin-top: 2.5rem !important;
    position: relative;
}

/* 分节标题通用样式 */
.register_form_field.section-start::before {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #31324E;
    margin-bottom: 0.8rem;
    padding-bottom: 0.3rem;
    /* 标题下边框，不需要可删除 */
    border-bottom: 1px solid #31324E;
    /* 如需加上边框，取消以下两行注释即可
    border-top: 1px solid #31324E;
    padding-top: 0.5rem;
    */
}

/* 登录信息分节标题 */
.register_form_field.section-login::before {
    content: "登录信息";
}

/* 个人信息分节标题 */
.register_form_field.section-personal::before {
    content: "个人信息";
}

/* 联系信息分节标题 */
.register_form_field.section-contact::before {
    content: "联系信息";
}

使用方法 #

• 给登录信息模块的第一个表单项（原用户名字段）添加两个自定义类：section-start、section-login
• 给个人信息模块的第一个表单项添加两个自定义类：section-start、section-personal
• 给联系信息模块的第一个表单项添加两个自定义类：section-start、section-contact

可调样式参数 #

• 修改margin-top数值可以调整不同分节之间的留白间距
• 修改font-size、font-weight、color可以调整标题文字的显示效果
• 调整padding-top、padding-bottom数值可以控制边框和标题文字的距离
• 如果原有样式优先级更高导致不生效，可在对应属性后加!important强制覆盖

内容的提问来源于stack exchange，提问作者Ross