How can I make three background lines for the title consists of two separate blocks?

Question

First, this is my goal

and I made this far using Stack Overflow.

What should I do to make line between news and types? And why does News and Types goes in one line though I used <span> tag?

.news_title h3{
  overflow: hidden;
  text-align: center;
}

.news_title h3:before,
h3:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.news_title h3:before{
  right: 0.5em;
  margin-left: -50%;
}

.news_title h3:after{
  left: 0.5em;
  margin-right: -50%;
}

<div class="news_title">
<h3><span>NEWS</span></h3>
<span>Types</span>

are you familiar with browser dev tools? You can literally see what code theyre using. — Flame, Jul 04 '20 at 09:58

focus.style · Answer 1 · 2020-07-04T10:27:48.097

You can use both :before and :after inside of display: flex parent. No overflow: hidden; workarounds needed.

More about flex and flex-grow you can read here https://developer.mozilla.org/en-US/docs/Web/CSS/flex.

.news_title, .centered {
  display: flex;
  flex-wrap: nowrap; /* prevents wrapping content on the new line */
  align-items: center; /* making vertical centering of all children both for .news_title and .centered  */
}

.news_title::before, .news_title::after {
  content: '';
  flex: 1 1 auto; /* the first digit is 'flex-grow: 1', helps element to occupy all free space */ 
  border-bottom: solid 1px #000;
}

.centered { 
  flex: 0 1 auto; /* the first digit is flex-grow: 0 */ 
}

h3, h4 { 
  flex: 0 1 auto;
  padding: 0 5px 0 5px;
}

span {
  flex: 0 1 auto;
  border-bottom: solid 1px #000;
  min-width: 10px;
}

<div class="news_title">
  <!-- this .centered wrapper helps the perfect centering of inside elements -->
  <div class="centered">
    <h3>NEWS</h3>
    <span></span>
    <h4>Types Types Types</h4>
  </div>
</div>

thank you for the answer and edditing my question! i didnt know how to show the picture at once.. — ssap, Jul 04 '20 at 10:13

score 0 · Answer 2 · answered Jul 04 '20 at 09:57

I always use this code to make ‍‍‍steps. I hope it helps you

<div class="box">

   <div class="line"></div>

   <div class="item" >  NEWS  </div>

   <div class="line"></div>

</div>

.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
.item {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.line {
  width: 50px;
  height: 2px;
  background-color: #ccc;
}

it helped me a lot too. i will save this code for the next round. Thankyou! — ssap, Jul 04 '20 at 10:14

SiarheiK · Accepted Answer · 2020-07-04T09:59:15.720

Here is result https://jsfiddle.net/yhn5pfkm/

You have to wrap both tags into one div to make line after and before both. And you have to make h3 display: inline to prevent moving Types to next line.

css

.news_title > div{
  overflow: hidden;
  text-align: center;
}

.news_title > div:before,
.news_title > div:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

.news_title > div:before{
  right: 0.5em;
  margin-left: -50%;
}

.news_title > div:after{
  left: 0.5em;
  margin-right: -50%;
}
  
.news_title > div > h3{
  display: inline;
}

html

<div class="news_title">
  <div>
    <h3><span>NEWS</span></h3>
    <span>Types</span>
  </div>
</div>

If you need also line between News and Types add follow css:

.news_title h3:after{
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 10px;
  margin-left: 5px;
  box-sizing: border-box;
}

oh my god. it worked, thank you so much. i didn't understand the code yet. but i will keep trying to study. Thank you! — ssap, Jul 04 '20 at 10:04

How can I make three background lines for the title consists of two separate blocks?

3 Answers3