Html 如何为文本创建自定义边框

如何获得如下图所示的边框

众所周知，我已经尝试了

边框底部

文本。但我想不出这样的边界。我会尝试使用伪元素吗？

h1{
显示：内联块；
位置：相对位置；
垫底：4px；
}
h1：之前{
显示：块；
内容：“；
宽度：70%；
高度：1px；
背景：橙色；
位置：绝对位置；
左：50%；
底部：0；
转换：翻译（-50%）；
}
h1：之后{
显示：块；
内容：“；
宽度：20%；
高度：4px；
背景：橙色；
位置：绝对位置；
左：50%；
底部：-4px；
转换：翻译（-50%）；
}

维杰·库马尔

您可以使用

：before

和

：after

伪元素在元素底部创建两行，并使用

position:absolute

对它们进行定位

h1{
位置：相对位置；
显示：内联块；
利润率：25px；
}
h1：之后，
h1：之前{
内容：''；
位置：绝对位置；
底部：-2px；
高度：1px；
宽度：60%；
左：0；
背景：#C0932E；
转化：translateY（100%）；
}
h1：之后{
高度：3倍；
宽度：30%；
}
中锋：之前，
中锋：之后{
左：50%；
转换：翻译（-50%，100%）；
}
.开始：之前{
宽度：100%；
}

LOREM IPSUM

Lorem ipsum dolor.

试试这个：

h1{
底部边框：2倍纯色橙色；
宽度：200px；
文本对齐：居中；
位置：相对位置；
}
h1：之后{
内容：''；
位置：绝对位置；
宽度：100px；
底部边框：3倍纯色橙色；
顶部：39px；
左：50px；
}

这是测试