使用：之前和之后：元素填充文本元素的剩余空间 [英] use :before and :after elements to fill remaining space of text element

问题描述

我试图创建一个基本上用两条线填充容器剩余宽度的标题标签。我试图创建它，以便无论标题文本的长度如何，您仍然可以获得相同的效果+间距量。这张图片更好地显示了我想解释的内容：

我得到的最接近的是使用百分比宽度，但如果只使用一个小标题，则会有大量剩余空间。通常我会在标题标记中为span对象添加背景颜色，但我也试图将其应用于各种背景颜色。

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

$ b

HTML：

 < h2>< span>小标题< / span> < / H2> 
  

CSS：

  h2 {
 width：100％; 
职位：亲属; 
 top：0;左：0; 
} 
 
 h2：之前，
 h2：之后{
 content：; 
 display：inline-block; 
宽度：30％; 
 height：1px; 
背景颜色：红色; 
职位：亲属; 
 top：-10px; 
} 
 
 h2：之前{
 left：0; 
} 
 
 h2：在{
右：0; 
} 
 
 h2 span {
 width：40％; 
 display：inline-block; 
 text-align：center; 
} 
  

任何人都可以提出如何实现我想要创建的内容吗？

解决方案

您可以使用 display：flex; >

  h2 {display：flex;} h2：before，h2：after {content：''; flex：1;保证金：汽车1em;身高：0; border-top：solid red 1px;}  

< h2> ;小标题< / h2>< h2>这是一个非常长的标题< / h2>

  h2 {display：flex;文本对齐：中心; } h2：before，h2：after {content：'';挠曲：1;保证金：汽车1em;高度：0; border-top：纯红色1px; }  

< h2> Big long title< br / >分两行？ title< / h2>

I'm trying to create an effect that essentially frames a title tag with two line either side that fill the remaining width of the container. I'm trying to create it so that whatever length the title text is, you still get the same effect + amount of spacing. This image better shows what I'm trying to explain:

The closest I've got is by using percentage widths, but if only a small title is used there is lots of remaining space. Usually I would add a background color to a span object within my title tag, but I'm also trying to make it so the effect will work on varied background colors.

Here's a jsfiddle: https://jsfiddle.net/wv9zcuvm/ and some code:

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;
}

Can anyone suggest how I can achieve what I'm trying to create?

解决方案

you could use display:flex; without span tag

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>Big long title <br/>on two lines ? title</h2>

这篇关于使用：之前和之后：元素填充文本元素的剩余空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！