也就是说，<hr> 元素。在一些贡献者的帮助下，我整理了 这个页面，其中包含了一些非常简单的样式。您也可以使用像 <div> 这样的元素，它可以容纳内容，但我喜欢水平线的语义。它是在两个内容部分之间的一个有力的分隔符。
请注意，在其中一些示例中，使用了生成的內容（:before/:after）。据我所知，这本来是不应该起作用的，因为 <hr> 是无内容样式元素（它们没有结束标签）。但如您所见，它确实有效。如果您担心长期设计保真度，请远离这些样式。
水平线简单样式
DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度！
不错的想法，但大多数在 IE 中看起来很奇怪（在 IETab 和 IE 9 中尝试过）。
实际上，对我来说，使用 IE9，它们都没有看起来很奇怪 - 它们看起来都与帖子中的图形显示一样。
哎呀... 让我修改一下 - 我不小心点了一个标签，让我糊涂了。它们中的大多数在“回退”条件下看起来还可以。我猜测 IE10 对过渡的扩展将会锁定其他样式。
谢谢！非常有用，为我的项目增添了风格。
为什么在上帝的绿色地球上，拥有自由选择的情况下，你会选择 IE？而且如果有 IE 用户错过了某些 CSS 样式，会有人在乎吗？笑：D 专业提示：这并不是他们错过的全部！
感谢添加 Twitter 和 Facebook 链接！你太棒了！
这些很棒！谢谢！
我一直不太理解
<hr>在现代网页中的作用。正如你所说，它将两个内容部分分开；但是不应该通过 HTML 将这两个部分定义为元素，而不是定义它们之间的“空间”吗？部分 *元素* 不需要特殊元素来分隔它们。
更清楚地说，水平线的用途与部分 *元素* 无关，它与不同的 *内容部分* 有关，例如，在具有完全不同主题的段落之间。
作为一名长期从事图形/SGML 模板设计，并多年来在麦迪逊大道上从事广告和字体设计的人，博学地说，
hr在网页设计中仍然有其作用，而不仅仅是将两个部分定义为元素。它也可以以类似于文本中分号或 em/en 破折号的方式定义两个元素之间的“休息”... 它可以被认为是一个有节奏的“元素”，如果您能“听到”它。设计实际上是由白色/灰色/黑色区域组成的。让我困扰的是，当前的时尚是让网页上的文本为深灰色的“阴影”，而不是黑色。就个人而言，黄色文本在蓝色背景上的可读性最佳，但由于现在可以使用数百万种颜色，所以这是我“老古董”的一面。;) 但是对于我这双 66 岁的眼睛来说，我说停止使用愚蠢的灰色文本！！叹息。不得不阅读 6 号字体已经够糟糕的了，但当它变成灰色而不是黑色时，我想我需要新的眼镜。啊！ （我有没有提到我这个年纪的人容易跑题？）很棒的文章！感谢您发布！
我喜欢你发布像这样的文章
我最着迷的部分是伪元素使我们能够在像水平线这样的空元素中插入内容的部分。
这打开了一些大门，并引发了许多问题。
我仍然在内容区域中看不到任何东西，除了黑色。只有在 Firefox 中。只能阅读评论，其他所有内容都是黑色的。
老实说，我不舒服使用
<hr>标签 T_T是的，IE 在使用这些样式时处于局外人。
伪元素示例在 Opera 中不起作用（并且 Opera 表现出最佳的标准遵循性），此外，由于高度为 0，hr.style-five 完全不可见。
好的观察。
谢谢。
这些很不错。我打算在我的一个正在进行的设计中加入其中一些。
至于 IE 和 Opera... 谁在乎！
除了网页开发者进行浏览器检查之外，谁还会使用 Opera 呢？
真的吗？我不知道“谁会使用 X 呢？”这种逻辑已经从 2002 年延续下来了。真棒。
你可能想 Google 一下“未来证明”，看看你是否能从网页开发中学习一两件事...
不错，简单的主意！
干得好。
我肯定会在我接下来的项目中使用它！
不错的想法。再次感谢您！
乍一看，我就像“为什么他们要把普通样式放进来（第一行）”，然后我看到了行中各种颜色的变化，很不错。
很棒的示例。我喜欢第一个，因为它很简单 :)
谢谢 Chris，这些很棒。
我已经调整了 style two 的 CSS，使其从白色而不是黑色淡出，但在 IE 中根本没有显示线 (示例)。
任何建议都会不胜感激。
水平线可以让网站看起来更专业，这正是我经常忘记的一个 HTML 标签。
不错的资源。
这些
hr太酷了，非常感谢！好帖子。我实际上在最近的一个项目中使用
:after和:before对<hr>元素进行了样式设置。对于 IE<9 兼容性，我建议使用然后只需在您的 CSS 中编写像
hr, .hr这样的 CSS 选择器。这可能被认为有点难看，但嘿，它非常有效！一个更强大的解决方案可能是使用 Paul Irish/HTML5 Boilerplate 的条件 HTML 类。 (https://github.com/h5bp/html5-boilerplate/blob/master/index.html#L3) 这样，您可以对水平线应用不同的样式，而无需在元素本身周围使用多余的条件标签，并且您可以使用
hr而不是div。是的，如果伪元素样式不是关键，那确实是一个更易于维护的解决方案。但我只是想抛出我的建议作为解决 IE<9 不对
<hr>应用:after和:before样式问题的变通方法 :)嗯... 好的主意。
这里 还有几个。
我有一个适合你的。老式的 彩虹横线.
很棒，我喜欢它。
我喜欢用hr来分割页面！很高兴看到一篇关于这个简单但实用的标签的不错的文章。
很棒的内容，谢谢您。
很棒的内容，谢谢您提供这些。我确定会反复使用它们 :)
您是否有关于双色hr的语义解决方案？
我一直使用
我不喜欢添加额外的div，但有时我不得不退回到任何有效的方法。
您应该能够在
hr元素上使用您上面的代码。只需在您上面的代码之前添加border:none;。这应该可以让您得到一个双色hr，而无需使用div。如果您为它添加了一些额外的高度，您可以指定背景颜色，并创建一个三色线条。哇!!! 重新设计！太棒了！
:（o）
感谢您，Chris。
很棒的内容，谢谢您！
我在样式8（特别是content="§" - 即使在使用在其他样式之外）上遇到一个奇怪的问题。似乎当使用Firefox渲染时，content="§" 在前面渲染一个Â。为什么会这样？
任何帮助都会不胜感激。
太棒了！谢谢Chris。迫不及待想尝试其中的一些！
我非常想看到#2 的渐变和#4 的阴影的混合... 但我明白这两个根本无法混合。也许使用正确的javascript可以实现不透明度淡出，但这会破坏“干净度”。一个额外的优势是随着它靠近中间，更改阴影大小，创造一种“切入页面并拉开”的效果。
对人类来说看起来很棒，但对于W3C CSS验证器来说，它表示hr.style-two存在错误：值错误 :\
我使用的是CSS 2.1 - 我需要将其更改为CSS 3吗？如果是，怎么做？请帮忙！
真的很酷！谢谢 :)
P.S. 我是否曾经说过我非常喜欢您的网站？我使用它来解决我所有的“我怎么才能做到”的问题。我仍然无法控制自己像使用sgml/gml一样使用html/css，但没关系。在网页标签方面，您的知识远超于我，我相信您所说的“真相”。这才是让您的网站如此出色的原因。如果您说了，我就不会在sourceforge/w3c/etc上再次检查。您是“专家”。:)（但是，如果您碰巧是那些相信html5“不再”基于sgml的人之一，我不得不降低您的评分10分。）好吧，这对我和我的护士来说已经很多话了，现在她要强迫我睡觉。叹气。这些退休中心真是太烦人了！
谢谢您的帮助...... 它运行良好。