WordPress场景下如何用CSS将br标签设置为hr水平分隔线样式

1. 修改目标位置的HTML #

找到需要添加分隔线的位置，也就是status-completed状态说明行末尾的普通换行标签，将其替换为带自定义类的换行标签：

<span class="order-status status-completed">And yet another one</span> and its explanation.<br class="hr-style">

其余代码保持不变，所有状态项仍然保留在原<p class="status-explanations">父容器内，不会触发WordPress自动闭合段落标签的逻辑。

2. 添加CSS样式 #

将以下代码添加到主题的「自定义CSS」或外观设置的「额外CSS」区域，即可把带类的换行标签渲染为和<hr>视觉一致的分隔线：

br.hr-style {
    /* 将默认行内的换行标签转为块级元素，实现独占一行 */
    display: block;
    /* 控制分隔线与上下内容的留白，可根据站点排版调整数值 */
    margin: 1rem 0;
    /* 清除默认样式，通过上边框绘制分隔线 */
    height: 0;
    border: none;
    border-top: 1px solid #dcdcde;
}

自定义调整参考 #

• 若要匹配站点原有分隔线样式，可修改border-top属性的粗细、颜色，例如border-top: 2px solid #f0f0f1即可实现更粗的浅灰色分隔线
• 调整margin属性的数值可以控制分隔线和上下文本的间距，数值越大留白越多
• 该方案完全不改动原有DOM层级，之前基于父级<p>标签匹配内部状态<span>的所有CSS规则可正常生效，无需额外修改。

原理说明：<br>属于段落内允许使用的行内容器，WordPress内置的自动段落格式化规则不会将其判定为块级元素，因此不会出现插入<hr>时自动补全</p>标签导致结构错乱的问题。

内容的提问来源于stack exchange，提问作者Faye D.