1

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:

enter image description here

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?

mmmoustache
  • 2,273
  • 6
  • 41
  • 62

2 Answers2

10

you can use display:flex; without span tag but, pseudo class, since this is only about design.

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>

What if text wraps, or is hold inside an inline-boxe ?

... pseudo will still be there follwing style rules.

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>

how does that work ?

  • pseudo are generated and inserted as virtual boxes. they only exist at screen, but can be styled like any HTML tag.

  • flex: 1; or just flex-grow:1; (to be more specific) will make flex child expand as much as possible. If more than one element (or virtual pseudo element here) receive the same rule value, the space they can use will be equally divided and distributed to each of them.

  • the text being pushed from pseudo element on both sides, will stand in the center untill there is no room left for the pseudo elements to show. The text can wrap to next line as it usually would.

  • Pseudo element (our virtual boxes here) can vanish once room left for them is equal to zero unless you set them a min-width or flex-basis value.

  • pseudo element can also have a margin, so they do not stick to the text. The margin will not vanish and if the pseudo shrinks to 0, it will look like the flex parent has a padding, so no need to add extra padding if you want the text stand off the edges.

  • this example only adds a border to draw a line, but the pseudo can allow complex styling and even import image.

  • finally, to find more potential about flex model , You take a look at : https://css-tricks.com/snippets/css/a-guide-to-flexbox/ , an easy reminder or tutorial.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
2

If you are fine with forcing a background on the span element you can do it this way: 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;
}
Rui Carneiro
  • 5,595
  • 5
  • 33
  • 39