Html 短于文本的点式上下边框

我想实现边框顶部和底部，如下图所示。如何使用CSS技巧实现

挑战是我不想要整个宽度和边界，它应该是响应太多

移动版图像是，它应该在桌面和移动浏览器也工作

我尝试使用%width边框，但不起作用

我写了下面的代码，但它不是100%完美的答案

HTML:

<h1>How it Works</h1

---

我对您的CSS做了一些更改：

h1{
    text-align: center;
    font-size: 70px;
}

h1:before, h1:after{
    position: relative;
    content: "";
    width: 30%;
    left: 35%;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 5px dotted yellow;
}

编辑：

如果需要固定的

宽度

，可以添加：

h1:before, h1:after{
    width: 150px;     /* You can change this value */
    left: 50%;
    transform: translateX(-50%);
}

---

这里是另一种使用

径向梯度

背景图像在顶部和底部生成点的方法。输出响应，顶部和底部的点数由宽度决定（例如，

width:108px

产生9个点数，因为x轴中的

背景大小

为

12px

）

与其他方法相比，这种方法的优点是可以更好地控制点的大小和点之间的空间。缺点是，与虚线边界法相比，该方法的计算精度较低（IE10+）

h1{
位置：相对位置；
文本对齐：居中；
字体大小：48px；
线高：1米；
填充：0.625em；
字体系列：Calibri；
字号：100；
}
h1：之后{
位置：绝对位置；
内容：''；
宽度：108px；/*X轴背景大小的倍数*/
身高：100%；
顶部：0px；
左：计算（50%-50px）；
背景：径向梯度（50%50%圆形，rgb（25018938）30%，透明50%），径向梯度（50%50%圆形，rgb（25018938）30%，透明50%）；
背景尺寸：12px 6px；
背景重复：重复-x；
背景位置：50%0.125em，50%2em；
}
/*只是为了演示*/
身体{
背景：rgb（9133143）；
颜色：白色；
}

工作原理
如何处理长文本

您也可以使用

框阴影

来实现这一点，首先在顶部的

psuedo元素之后创建一个
，在底部的
伪元素之前创建一个
，然后给出两个
框阴影


正文{
背景#09858F；
}
div{
位置：相对位置；
显示：内联块；
利润率：100像素；
}
h1{
文本对齐：居中；
字体系列：Calibri；
字体大小：50px；
颜色：#fff；
利润率：50像素；
}
h1：之后{
内容：“；
位置：绝对位置；
左：30%；
高度：10px；
宽度：10px；
背景：黄色；
最高：20%；
边界半径：50%；
盒影：20px00黄、40px00黄、60px00黄、80px00黄、100px00黄、120px00黄、140px00黄、160px00黄；
}
h1：之前{
内容：“；
位置：绝对位置；
左：30%；
高度：10px；
宽度：10px；
背景：黄色；
底部：20%；
边界半径：50%；
盒影：20px00黄、40px00黄、60px00黄、80px00黄、100px00黄、120px00黄、140px00黄、160px00黄；
}
它的工作原理
您可以尝试使用
transform:translateX（50%）；宽度：50%
在
：之前，：之后以及
文本对齐：居中在h1。@Area 28上我试过了，但是响应越来越大，越来越小，它不起作用。谢谢你的快速回复。但我不想把整个宽度的边框从上到下。想要的就像图像一样。中间有边框，只有很少的像素。我已经更新了我的答案。见a；）您还可以将
width
和
left
修改为解决问题的值，保留以下公式：
width+2*left=100
。仍然存在问题。它也应该是与响应型合作的。实际的手机版本图片是我不明白你在做什么。我认为这个形象是正确的行为，不是吗？你能再解释一下你想要什么吗？我想要固定的“px”线。但上下文本的中心。在您的演示中，使用“更大”和“更大”。
h1:before, h1:after{
    width: 150px;     /* You can change this value */
    left: 50%;
    transform: translateX(-50%);
}