设计师很少使用简单的水平分隔线。分隔线通常是一个具有高度和背景的空 div，或者标题下方的短装饰条。识别这些元素可以让 Elementor 结构树保持干净，而不是用空容器填充它。
什么会被识别为分隔线
<hr> 总会转换为分隔线小部件。除此之外，空的 <div> 或 <span> 在满足以下条件时会被视为分隔线：
- 不包含文本和实际内容元素，
- 渲染为细条——高度很小，宽度明显大于高度，
- 并且确实具有可见颜色，无论是背景还是顶部/底部边框。
空的且无颜色的情况被有意排除。没有颜色的空白间距 div 不是分隔线，将其转换为可见线条会添加设计中原本没有的东西。
会保留哪些内容
线条颜色及其粗细——有边框时从边框读取，否则从背景颜色和渲染高度读取。明显比其容器窄的短强调条还会获得明确的宽度和对齐方式，因此标题下方 78px 的装饰条会保持 78px，而不是拉伸到整列宽度。
为什么这比听起来更重要
如果没有这一点，每条装饰线都会变成一个带背景的空容器——结构树中的一个节点，看起来像布局元素，但实际上不是。在一个长页面中，每个区块都这样叠加，结构图就会变得难以阅读。将它们映射为分隔线小部件可以让结构树如实区分哪些是布局，哪些是装饰。
之后进行编辑
Elementor 的分隔线小部件提供的功能远不止普通线条：除实线以外的样式（点线、虚线、图案）、中间可选文字或图标，以及宽度和间距控制。一旦线条成为真正的分隔线小部件，所有这些都只需一键即可使用——对于一个带颜色的空 div 来说则不然。
精确阈值
如果这个规则更模糊，会在半页内容上产生误判，因此测试条件被刻意收窄。一个空的 <div> 或 <span> 只有在其宽度至少为 12px、高度不超过 8px，并且宽度至少是高度的 三倍——此外还必须具有可见颜色时，才会转换为分隔线小部件。
每个数字都有其作用。12px 的下限会排除微小的装饰点和边框周围出现的 1px 伪影。8px 的上限用于区分线条和色条——超过这个高度，你面对的是一个彩色色块，它应该放在容器中，这样可以在里面放置内容。3:1 的比例会排除小方块：一个 6×6 的颜色样本虽然能通过前两项测试，但显然不是分隔线。
测量基于元素实际渲染后的结果，而非样式表，因此高度来自内边距规则或继承的行高的色条，会根据你看到的效果来判断，而不是根据产生该效果的属性来判断。
渐变条也算在内
颜色测试同时接受背景图像和背景颜色，而 CSS 渐变属于背景图像。因此，常见的强调条——区块标题下方从一种品牌色过渡到另一种品牌色的短条——会被识别并转换为分隔线小部件。
不过，值得了解接下来会发生什么：Elementor 的分隔线小部件只接受纯色，不支持渐变，因此转换后的小部件会使用单一颜色，而不是渐隐效果。如果渐变很重要，那么这是少数几种保留原始元素并将其作为小型样式容器更好的情况之一。
当线条根本不是独立元素时
实际页面上的大量线条并不是元素，而是其他元素的边框——标题下方的 border-bottom、页脚的顶部边框、标记引用的左边框。
这些线条不会转换为分隔线小部件，也不应该如此。边框是标题或容器的属性，它就会按原样转换：成为所属小部件上的边框设置。视觉结果完全相同，结构也更诚实，因为线条始终附着在它所装饰的内容上。移动标题时，线条会随之移动——如果它被拆分成位于下方的独立分隔线小部件，情况就不会这样。
间距元素不是分隔线
一个有高度但没有颜色的空 div 是间距元素，它有意无法通过颜色测试。将其转换为分隔线小部件会画出设计中原本没有的线条——这是一种可见的变化，而且是最糟糕的变化，因为它看起来像是故意的。
间距元素遵循正常的包装规则：没有任何样式效果的会被折叠，携带最小高度的会作为具有该高度的容器保留下来。如果你更希望有一个明确的 Spacer 小部件，可以在编辑器中快速替换——对于你计划稍后进行响应式调整的任何内容，这都是一个好主意，因为 Spacer 小部件具有按设备设置高度的控件。
给源内容的提示
如果你希望分隔线能够干净地转换，请给它显式的背景颜色和较小的高度，而不是依赖伪元素。像 ::after 这样的伪元素并不是真正的 DOM 节点，因此根本无法转换为小部件——用它们绘制的任何内容都必须在 Elementor 中手动重建。这是设计师的强调条在转换过程中消失的最常见原因：它从一开始就不存在于 DOM 中。