0

I am trying to get a line over my title that lines up evenly with lines before and after my `sub-title

I looked at two references:

These helped me get started but I am not sure how to get the top line even with the before and after lines without wrapping despite the length of the title or subtitle.

<div class="title">
<h1>Testingtesting</h1>
</div>
<div class="sub-title">
<h1>Testing</h1>
</div>

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
h1 {
width: 20%;
margin: .7em auto;
overflow: hidden;
text-align: center;
font-weight:300;
color: #000;
}
h1:before, h1:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 .1em 0 -55%;
vertical-align: middle;
border-bottom: 1px solid;
}
h1:after {
margin: 0 -55% 0 .1em;
}
span {
display: inline-block;
vertical-align: middle;
}
.title h1 {
border-top: 1px solid black
}
.title h1:before, .title h1:after {

border-bottom: 0px solid;
}

</style>
Community
  • 1
  • 1
  • CSS-Tricks has an article related to this that might solve your issue: https://css-tricks.com/line-on-sides-headers/ – Robert Jun 30 '16 at 23:05

2 Answers2

1

You should use white-space: wrap; it should work after using it as you have set width on the element on which you are setting this.

For example,

}

.title h1:after {
    content:"\A"; 
    white-space: pre; 
}

Explanation

In CSS :after is used to generate some content known as a pseudo-element. The "\A" is interpreted as a line break provided that the white space is preserved, hence you need to set white-space: pre. Finally, the element has to be inline, hence display: inline.

R.K123
  • 159
  • 2
  • 9
0

I believe I was able to accomplish what you want with the use of flexbox. TL;DR: see snippet below.

First, I nested div.sub-title within div.title in the HTML.

Then, I turned the div.title into a flex container with display: flex, and set the flow direction to column. Adding align-items: center centers the elements within the container.

Next, I targeted the first h1 element, adding a border-top and border-bottom. You can make it however thick you like—I put 4px. If you want to add or reduce the spacing between the borders and the title, adjust the padding.

I then targeted the div.sub-title container. I gave it a position of relative and then offset its position vertically with top: -45px. You may want to adjust this value to get it centered the way you want it. I applied a zero line-height to remove the default value which is pretty tall on a heading. To adjust the spacing between the sub-title and the line on either side, add padding to div.sub-title—I used 20px. Lastly, add a background color that matches your page's background.

While this works, it'll largely depend on how much pre-defined values you're able to use (like padding and background-color).

Another thing to note is when the screen width gets too small, and the subtitle wraps, it'll look really ugly. This is due to the line-height being set to zero. To fix, you can set a min-width on div.title to prevent the entire container from going below a certain width or reset the line-height in div.sub-title at a certain breakpoint with a media query.

.title {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  min-width: 350px;
}
.title > h1 {
  display: inline;
  padding: 30px 0;
  border-top: 4px solid black;
  border-bottom: 4px solid black;
  text-align: center;
}
.sub-title {
  position: relative;
  top: -45px;
  
  /* reset this w/ a media query when screen size gets too small */
  line-height: 0px;
  
  padding: 0 20px;
  background-color: #fff;
}
<body>

  <div class="title">
    <h1>Tomorrow Or Something Longer</h1>
    <div class="sub-title">
      <h1>Today or something</h1>
    </div>
  </div>

</body>
heyitsjhu
  • 951
  • 7
  • 9
  • as mentioned, it won't render nicely, which sucks. My solution likely won't work for all cases—probably just single like (or short-ish) titles and subtitles, which is limiting—I'll admit. :( – heyitsjhu Jul 01 '16 at 00:02