使用 :before 和 :after 元素填充文本元素的剩余空间[重复]

Posted 2023-03-06

【中文标题】使用 :before 和 :after 元素填充文本元素的剩余空间[重复]

【英文标题】：use :before and :after elements to fill remaining space of text element [duplicate]

【发布时间】：2015-12-28 13:09:51

【问题描述】：

我正在尝试创建一种效果，该效果实质上是标题标签的框架，两边各有两条线，填充容器的剩余宽度。我正在尝试创建它，以便无论标题文本的长度如何，您仍然可以获得相同的效果 + 间距量。这张图片更好地展示了我想要解释的内容：

我得到的最接近的是使用百分比宽度，但如果只使用一个小标题，那么剩余空间会很大。通常我会在我的标题标签内的 span 对象中添加背景颜色，但我也在尝试使其效果适用于不同的背景颜色。

这是一个 jsfiddle：https://jsfiddle.net/wv9zcuvm/ 和一些代码：

html：

<h2><span>Small title</span></h2>

CSS：

h2
    width:100%;
    position:relative;
    top:0; left: 0;


h2:before,
h2:after
    content:"";
    display:inline-block;
    width:30%;
    height:1px;
    background-color:red;
    position:relative;
    top: -10px;


h2:before
    left:0;


h2:after
    right:0;


h2 span
    width:40%;
    display:inline-block;
    text-align:center;

谁能建议我如何实现我想要创造的东西？

【参考方案1】：

如果您可以在 span 元素上强制设置背景，您可以这样做：http://jsfiddle.net/2tvmm2rL/

h2
    width: 100%;
    position: relative;
    top:0; left: 0;
    text-align: center;


h2:before 
    content:"";
    display: inline-block;
    width: 100%;
    height: 1px;
    background-color: red;
    position:absolute;
    top: 50%;
    z-index: -1;
    left:0;


h2 span 
    display: inline-block;
    text-align: center;
    background: white;
    padding: 0 10px;

【讨论】：

您可以在h2 span上使用padding-left和padding-right来增加行与标题之间的距离

更新了例子:)

【参考方案2】：

你可以使用 display:flex; 而不使用 span 标签，但是，伪类，因为这只是关于设计。

h2 
  display: flex;

h2:before,
h2:after 
  content: '';
  flex: 1;
  margin: auto 1em;
  height: 0;
  border-top: solid red 1px;

<h2>Small title</h2>
<h2>This is a very long title</h2>

如果文本换行，或者被包含在内联框内怎么办？

... 遵循样式规则的伪元素仍然存在。

h2 
  display: flex;
  text-align: center;


h2:before,
h2:after 
  content: '';
  flex: 1;
  margin: auto 1em;
  height: 0;
  border-top: solid red 1px;


h2 span 
  max-width: 5.5em

<h2>Big long title <br/>on two lines ? title</h2>
<h2><span>inline-boxe and <code>width</code> or <code>max-width</code>?</span></h2>

它是如何工作的？

伪生成并作为虚拟框插入。它们只存在于屏幕上，但可以像任何 HTML 标记一样设置样式。

flex: 1; 或只是flex-grow:1; （更具体地说） 将使 flex child 尽可能扩展。如果多个元素（或此处为虚拟伪元素）接收到相同的规则值，则它们可以使用的空间将被平均分配给每个人。 p>

从两侧的伪元素推送的文本将站在中间，直到没有空间让伪元素显示。文本可以像往常一样换行到下一行。

伪元素（这里是我们的虚拟框）一旦剩余空间为零，它们就会消失，除非你为它们设置min-width 或flex-basis 值。

伪元素也可以有边距，所以它们不会粘在文本上。 边距不会消失，如果伪缩小到 0，它看起来就像 flex 父级有一个填充，所以如果你想让文本远离边缘，就不需要添加额外的填充。 p>

这个例子只添加了一个边框来画一条线，但是伪可以允许复杂的样式甚至导入图像。

最后，想了解flex模型的更多潜力，请看：https://css-tricks.com/snippets/css/a-guide-to-flexbox/，一个简单的提醒或教程。