css - 我应该如何制作一个不一定代表主题中断的分隔线 与 、、css 等

Question

我一直很喜欢 <hr>标签作为设计分隔线，因为它是一个简洁的空标签，你可以使用 CSS 来设计它的主题。我比 border-bottom 更喜欢它，因为您可以将宽度设置为小于其上方的内容，即容器宽度的 25%。

我几乎觉得应该有一个空标签作为 css 设计的 anchor 。

我知道我可以用任何带有 CSS 的标签来做到这一点: <div class=divider></div>

工作得很好，但不如 <hr> 简洁

所以对我来说<hr>从表面上看似乎是最好的选择。

然后我读了<hr>的HTML5语义这说这是一个主题休息。 (这似乎有点武断)标题是不是与其内容不同的主题？在语义情况下，如果我想要一个帖子的特色标题，在图像上方有一个漂亮的框，标题在顶部，分隔线和副标题在它下面，该怎么办？

我希望我的内容对联合有意义，如果它在 safari 上的替代 css 喜欢的阅读器中打开，我希望它看起来不错，这似乎又在说 <hr>不是一个好的选择。

我应该使用 <span class=divider></span> 吗？这似乎很浪费。我也考虑过<svg>或 <br>但对我来说<br>看起来像一个空行，在语义上也可能像句子中的逗号一样的停顿。当主要原因是设计偏好而不是主题中断时，在语义上设置水平分隔线的最佳方式是什么？

Answer 1

我认为根据您的建议，我会继续使用单独的自定义 div <div class="box-divider"></div>如果它是您结构的一个组成部分并且在分隔线的外观和定位方面为您提供最大的灵 active ，那么它真的没有那么浪费。你可以诚实地对<hr>做同样的事情标签，如果你自定义它的 css，你可以让它看起来像你想要的。

很多用户评论说在需要分隔线的元素上使用伪元素，这是一个很好的建议。

.box {
    position: relative;
}

.box:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: green;
}

如果它像边界线一样简单，您可以使用 border-bottom: 1px solid black;例如元素本身，并放弃对单独元素的需求。添加一些 padding-bottom 来控制定位。

总而言之，如果它是您需要的棘手/自定义分隔线，我会选择单独的 div 分隔线或伪元素。