如何使用有效的HTML向标题添加大小的上下边框？

我的标题是这样的：但它对HTML标准无效，我得到了这个错误

在此上下文中，元素hr不允许作为元素h3的子元素

我用过这个密码

<h3 class="tips-tricks-title"><hr class="head-up">Title<hr class="head-down"></h3>

我尝试过几件事，但如果没有标题中的人力资源元素，我就做不到

---

有没有办法我怎么做？谢谢

您可以使用标题的伪元素来画这些线

.tips技巧标题{
位置：相对位置；
显示：内联块；
填充物：5em 1em；
}
.tips技巧标题：之前，.tips技巧标题：之后{
位置：绝对位置；
内容：''；
边框顶部：1件纯黑；
}
.tips技巧标题：之前{
顶部：0；左侧：50%；
宽度：75%；
转化：translateX（-50%）；
}
.tips技巧标题：之后{
底部：0；
左：0；
宽度：100%；
}

---

Title

您可以使用标题的伪元素来绘制这些线条

.tips技巧标题{
位置：相对位置；
显示：内联块；
填充物：5em 1em；
}
.tips技巧标题：之前，.tips技巧标题：之后{
位置：绝对位置；
内容：''；
边框顶部：1件纯黑；
}
.tips技巧标题：之前{
顶部：0；左侧：50%；
宽度：75%；
转化：translateX（-50%）；
}
.tips技巧标题：之后{
底部：0；
左：0；
宽度：100%；
}

---

标题

为什么不简化它

.tips-tricks-title{
    display: table;
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

<h3 class="tips-tricks-title"> Title </h3>

.tips技巧标题{
显示：表格；
保证金：0；
填充顶部：15px；
垫底：15px；
边框顶部：1px实心#999；
边框底部：1px实心#999；
}
标题

为什么不简化它

.tips-tricks-title{
    display: table;
    margin: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

<h3 class="tips-tricks-title"> Title </h3>

.tips技巧标题{
显示：表格；
保证金：0；
填充顶部：15px；
垫底：15px；
边框顶部：1px实心#999；
边框底部：1px实心#999；
}
标题

在适当阅读了问题并访问了链接后，我已更改了答案

这是一种使用svg的替代方法，因此它不能与不支持svg的浏览器一起使用

background.svg

<svg xmlns="http://www.w3.org/2000/svg" height="30" width="100">
  <line x1="25" y1="0" x2="75" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
  <line x1="0" y1="30" x2="100" y2="30" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>

HTML

标题

在适当阅读了问题并访问了链接后，我已更改了答案

这是一种使用svg的替代方法，因此它不能与不支持svg的浏览器一起使用

background.svg

<svg xmlns="http://www.w3.org/2000/svg" height="30" width="100">
  <line x1="25" y1="0" x2="75" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
  <line x1="0" y1="30" x2="100" y2="30" style="stroke:rgb(0,0,0);stroke-width:2" />
</svg>

HTML

标题

标题

-这有帮助吗？

标题

-这有帮助吗？这会导致相同长度的边框，没有？哦，对不起，我的错，你的示例太棒了这会导致相同长度的边框，没有？哦，对不起，我的错，你的示例太棒了这可能有效，但是为了设计样式而添加标记应该是最后的选择。很抱歉，我不理解@isherwood的这条评论。问题似乎至少是关于涉及两个hr标记和一个h3标记的无效HTML。没有添加任何内容，它只是以一种不无效的方式放置，并试图实现问题代码生成的相同输出。也许这些问题需要重新措辞。不，您没有添加任何与OP的原始想法有关的内容，但HTML已添加到文档中，仅用于样式设计目的。谁把它放在那里并不重要；这是个坏主意。我没有访问链接，是我弄错了。这可能有效，但为了样式而添加标记应该是最后的选择。很抱歉，我不理解@isherwood的评论。问题似乎至少是关于涉及两个hr标记和一个h3标记的无效HTML。没有添加任何内容，它只是以一种不无效的方式放置，并试图实现问题代码生成的相同输出。也许这些问题需要重新措辞。不，您没有添加任何与OP的原始想法有关的内容，但HTML已添加到文档中，仅用于样式设计目的。谁把它放在那里并不重要；这是个坏主意。我没有访问链接，是我弄错了。

<h3 class="tips-tricks-title">Title</h3>