我的
HTML代码有这样的结构：
h1 {
text-align: center;
font-size: 20pt;
padding-bottom: 0;
}
h2 {
text-align: center;
font-size: 16pt;
}
<body>
...
<div id="container">
<h1>Title</h1>
<h2>Sub</h2>
</div>
...
</body>
我想“画出”这些标题之间的一行：
它应该适应标题的宽度：
(请原谅我的图片编辑技巧)
有没有一个简单的仅限css的方式呢？
解决方法
您可以使用简单的伪元素来处理此问题.没有HTML结构更改或不支持跨浏览器的CSS.
我们需要在父项上使用表格显示,并在< h1>上创建一个新的元素(与伪的边框).
我们需要在父项上使用表格显示,并在< h1>上创建一个新的元素(与伪的边框).
看这个例子：
#container {
display: table;
margin: 0 auto;
text-align: center;
}
h1:after {
content:"";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 3px solid red;
}
h1,h2 {
margin: 5px 0;
padding: 0 10px 5px;
}
h1 {
position: relative;
font-size: 20pt;
}
h2 {
font-size: 16pt;
}
<div id="container">
<h1>long long title</h1>
<h2>Sub</h2>
</div>
<div id="container">
<h1>h1</h1>
<h2>Sub</h2>
</div>
<div id="container">
<h1>h1</h1>
<h2>long long subtitle</h2>
</div>
