我应该如何制作不一定代表主题休息的分隔线 <hr> 与 <span>、<div>、css 等

Question

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

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

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

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

简洁

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

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

我希望我的内容对联合发布有意义，并且我希望它在备用 css 中打开时看起来不错 css 喜欢 reader 在 safari 上，这似乎又在说 <hr>不是一个好的选择。

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

Answer 1

我认为根据你的建议我会继续使用单独的自定义 div <div class="box-divider"></div> 如果它是你结构的一个组成部分并为你提供最大的灵活性，那真的不是那么浪费根据您的 divider 的外观和定位。如果您自定义 css 标签，您可以诚实地对 <hr> 标签执行相同的操作，您可以根据需要使它看起来像。

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

.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 来控制定位。

总而言之，如果它是您需要的 tricky/custom divider，我会选择单独的 div divider 或伪元素。

我应该如何制作不一定代表主题休息的分隔线 <hr> 与 <span>、<div>、css 等

How should I make a divider that doesn't necessarily represent a thematic break <hr> vs <span>,<div>,css etc

css

html

semantic-markup