使用css在文本后创建行

Posted 2023-03-05

【中文标题】使用css在文本后创建行

【英文标题】：Create line after text with css

【发布时间】：2014-01-22 23:38:02

【问题描述】：

我试图在我的每个 h2 标签之后写一行。我不知道我应该如何分辨宽度，因为 h2 标题的长度从 h2 到 h2 是不同的。

我使用 :after 方法来创建线条

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

在此查看代码：http://jsfiddle.net/s9gHf/ 如您所见，线条太宽，使网站太宽。

【问题讨论】：

如何删除background-color、width、top 并输入content 行，只要你想使用下划线__jsfiddle.net/3dj8m，或者做您希望宽度根据 h2 元素宽度做出响应？

【参考方案1】：

我是这样做的： http://jsfiddle.net/Zz7Wq/2/

我使用背景而不是之后，并使用我的 H1 或 H2 来覆盖背景。不是你上面的方法，但对我来说效果很好。

CSS

.title-box 背景：#fff url('images/bar-orange.jpg') repeat-x left;文本对齐：左；边距底部：20px; .title-box h1 颜色：#000;背景颜色：#fff；显示：内联；填充：0 50 像素 0 50 像素；

html

<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>

【讨论】：

@user3026212 我查看了该站点，您在 199-200 行附近有一些糟糕的 html。你有一个开放的风格=“。你也可以发布代码/你是如何集成它的吗？

【参考方案2】：

您可以通过额外的<span> 来实现这一点：

h2 
  font-size: 1rem;
  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><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>

另一种解决方案没有额外的<span>，但需要<h2> 上的overflow: hidden：

h2 
  font-size: 1rem;
  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><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>

外部示例：First、Second

【讨论】：

谢谢...溢出：隐藏，全部完成！

【参考方案3】：

使用弹性盒：

h2 
  display: flex;
  align-items: center;


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

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

【参考方案4】：

在我看来，这是另一个使用 flex 包装器的更简单的解决方案：

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


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

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

External link

【参考方案5】：

这是我发现实现结果的最简单方法：只需在文本前使用 hr 标签，并为文本设置页边距顶部。非常简短易懂！ jsfiddle

h2 
  background-color: #ffffff;
  margin-top: -22px;
  width: 25%;


hr 
  border: 1px solid #e9a216;

<br>

<hr>
<h2>ABOUT US</h2>

【讨论】：

【参考方案6】：

不再需要额外的包装器或 span 元素。 Flexbox 和 Grid 可以轻松处理这个问题。

h2 
  display: flex;
  align-items: center;


h2::after 
  content: '';
  flex: 1;
  margin-left: 1rem;
  height: 1px;
  background-color: #000;

<h2>Heading</h2>

【讨论】：

这个解决方案很棒！ CSS 很简单，不需要在 HTML 中添加任何额外的元素。

【参考方案7】：

我一点经验都没有，所以请随时纠正。但是，我尝试了所有这些答案，但在某些屏幕上总是出现问题。 因此，我尝试了以下对我有用的方法，并且在除移动设备之外的几乎所有屏幕上看起来都符合我的要求。

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

CSS：

.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:aftercontent:""; display:block; clear:both; 
.wrapper:aftercontent:""; display:block; clear:both; 

【参考方案8】：

我注意到有一些 flexbox 实现，但他们没有解释为什么以及如何使用它。

首先，我们只需要一个元素，本例中为h2。

我们将元素显示行为更改为display: flex 然后我们使用align-items: center 将其子元素垂直居中。

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

现在让我们画线，为此我们将使用伪元素after。

我们将'' 添加到内容中以显示绘制的元素。 现在让我们使用flex: auto 使其灵活。这意味着我们的元素是根据其宽度和高度属性调整大小的。它会增长以吸收 flex 容器中的任何额外可用空间，并缩小到最小尺寸以适应容器。这相当于设置flex: 1 1 auto。 然后我们使用margin-left: 1rem在文本和行之间添加一个小间隙。 最后，我们用border-top: 1px solid #000画了一条黑线。

h2::after 
    content: '';
    flex: auto;
    margin-left: 1rem;
    border-top: 1px solid #000;

这里是函数式 sn-p。

h2 
  font-size: 1em; /* not needed */
  display: flex;
  align-items: center;


h2::after 
  content: '';
  flex: auto;
  margin-left: 1rem;
  border-top: 1px solid #000;

<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>