Html 如何在我的h1标签前后划线？_Html_Css

Html 如何在我的h1标签前后划线？

html css

Html 如何在我的h1标签前后划线？,html,css,Html,Css,我四处搜索，想找到一个解决方案，如何制作这样的东西： -----------我的文字-------------- 在HTML/CSS中。所以我需要一个hr标签在我的文本前后有人知道如何解决这个问题吗 <!DOCTYPE html> <html> <head> <title>Inline HR</title> <style type="text/css"> div { text-align: center; } h

我四处搜索，想找到一个解决方案，如何制作这样的东西：

-----------我的文字-------------- 在HTML/CSS中。所以我需要一个hr标签在我的文本前后

有人知道如何解决这个问题吗

<!DOCTYPE html>
<html>
<head>
<title>Inline HR</title>
<style type="text/css">
div {
    text-align: center;
}

hr {
    display: inline-block;
    width: 40%;
}
</style>
</head>
<body>
<div style="center">
<hr>
My Text
<hr>
</div>
</body>
</html>

演示：

第二个示例，将文本放置在HR上的白色背景（将其更改为页面的任何背景），并将其与

页边距左侧：自动

和

页边距右侧：自动

对齐。您可以创建图像，将其设置为重复，如下所示：

h1 {
background-image: url('line.png');
background-position: center center;
background-repeat: repeat-x;
text-align: center;
}
h1 span {
background-color: #FFF  //Or your website background color if not white

//UPDATE: to add padding around the text:
padding: 5px 10px;
}

然后在HTML中：

<h1><span>My text</span></h1>

我的文本


试验
div{
位置：相对位置；
高度：10px；
边框底部：1px纯黑；
}
跨度{
位置：绝对位置；
左：50%；
左边距：-10px；
背景色：白色；
填充：0px 10px 0px 10px；
}
我的文字

像这样的东西

h1:before {
    padding-right: 5px;
    content: "---------------------";
}
h1:after {
padding-left: 5px;
    content: "---------------------";
}

如果你真的想要一条直线而不是破折号，那么我没有解决办法。

这很简单

h2 { text-align: center; /*optional*/ line-height: 2; background: #ccc; }
h2:before,
h2:after { padding: 1em; position: relative; top: -.4em; content: '__________________'; }

我昨天回答了完全相同的问题。看看我如何用你的例子在文本周围做一个填充？所以文本后面没有任何线条？我升级了上面的示例，为span标记添加了填充。如何将文本居中？目前它没有对准中心

h1:before {
    padding-right: 5px;
    content: "---------------------";
}
h1:after {
padding-left: 5px;
    content: "---------------------";
}

h2 { text-align: center; /*optional*/ line-height: 2; background: #ccc; }
h2:before,
h2:after { padding: 1em; position: relative; top: -.4em; content: '__________________'; }