使用css创建文本后的行

我试着在我的每个h2标签后面画一行。我不知道该如何分辨宽度，因为h2标题的长度在h2和h2之间是不同的

我使用：after方法创建线

       h2:after {
       position: absolute;
       content: "";
       height: 2px;
       background-color: #242424;
       width: 50%;
       margin-left: 15px;
       top: 50%;
       } 

在此处检查代码： 正如你所见，这条线太宽了，网站也太宽了。

我是这样做的：

我使用背景而不是背景，并使用我的H1或H2覆盖背景。不完全是你上面的方法，但对我很有效

CSS

.title框{背景：#fff url（'images/bar orange.jpg'）重复-x左；文本对齐：左；页边距底部：20px；} .title框h1{color:#000；背景色：#fff；显示：内联；填充：0 50px 0 50px；} HTML

标题可以放在这里
标题可以放在这里这一个真的很长
您可以通过额外的
来实现这一点：

HTML

<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>


另一个解决方案没有额外的
，但需要
上的
溢出：隐藏：

使用flexbox：

h2 {
    display: flex;
    align-items: center;

}

h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 1px solid #000;
}

html:

标题
在我看来，使用flex包装器还有另一个更简单的解决方案：

HTML:

这是我找到的最简单的实现结果的方法：只需在文本前使用hr标记，并为文本设置页边空白顶部。非常简短易懂


h2{
背景色：#ffffff；
利润上限：-22px；
宽度：25%；
}
人力资源{
边框：1px实心#e9a216；
}



关于我们
不再需要额外的包装器或span元素。Flexbox和Grid可以轻松处理此问题


h2{
显示器：flex；
对齐项目：居中；
}
h2：：之后{
内容：''；
弹性：1；
左边距：1 em；
高度：1px；
背景色：#000；
}
标题
我一点经验都没有，所以请随意更正。然而，我尝试了所有这些答案，但在某些屏幕上总是出现问题。
因此，我尝试了以下对我有用的方法，除了手机外，几乎所有的屏幕都显示出我想要的效果

<div class="wrapper">
   <div id="Section-Title">
     <div id="h2"> YOUR TITLE
        <div id="line"><hr></div>
     </div>
   </div>
</div>

如果你想使用下划线
，
背景色
，
宽度
，
顶部
并输入
内容
行，或者你想宽度根据h2元素的宽度来响应，怎么样？@user3026212我查看了网站，发现里面有一些糟糕的html，在199-200线附近。你有一个open style=“。你也可以发布代码/你是如何集成它的吗？谢谢你…溢出：隐藏，完成了一切！很棒的解决方案+1这个解决方案很棒！CSS很简单，不需要在HTML中添加任何额外的元素。
标记现在有了语义含义，不应该用作纯图形元素（）.这就像只用来放大文本。这不是它的用途。
h2 {
    position: relative;
}

h2 span {
    background-color: white;
    padding-right: 10px;
}

h2:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: -1;
}

h2 {
    overflow: hidden;
}

h2:after {
    content:"";
    display: inline-block;
    height: 0.5em;
    vertical-align: bottom;
    width: 100%;
    margin-right: -100%;
    margin-left: 10px;
    border-top: 1px solid black;
}

h2 {
    display: flex;
    align-items: center;

}

h2 span {
    content:"";
    flex: 1 1 auto;
    border-top: 1px solid #000;
}

<h2>Title <span></span></h2>

<div class="wrapper">
  <p>Text</p>
  <div class="line"></div>
</div>

.wrapper {
  display: flex;
  align-items: center;
}

.line {
  border-top: 1px solid grey;
  flex-grow: 1;
  margin: 0 10px;
}

<div class="wrapper">
   <div id="Section-Title">
     <div id="h2"> YOUR TITLE
        <div id="line"><hr></div>
     </div>
   </div>
</div>

.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}

#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}

#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}

#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}

#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }