1

I have h3 and would like to have a line before/left and after/right DAY-BY-DAY word, but can only achieve line on the top and at the bottom of that word with ::after and ::before. How can I achieve this with flex, please help.

enter image description here

Something like ----DAY-BY-DAY----

Here is html: 

<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>`

Here is CSS:

#daybyday::before {
             content: "";
             display: block;
             background: salmon;
             height: 5px;
         }

        #daybyday::after {
            content: "";
            display: block;
            background: salmon;
            height: 5px;
        }
AmigaAbattoir
  • 632
  • 8
  • 21
Alina Khachatrian
  • 757
  • 1
  • 6
  • 19

1 Answers1

2

Do you want something like this?

So what we do here is, we create a div with color: salmon and height of 5px, then we set the flex property for the element using display:flex, by using flex property (align-items:center -> for vertical centering and justify-content:center -> for horizontal centering, we can get the h3 element in the center of the line, finally to prevent the div which is behind the h3 element from being visible, I set the background-color:white, so that it is not visible! 

#daybyday {
  display: inline;
  background-color:white;
}

.text-special {
  font-style: italic;
  font-size: 23px;
  color: #7B7B7A;
}

.line {
  background-color: salmon;
  height: 5px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
<div class="line">
  <h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3>
  <div>
Naren Murali
  • 19,250
  • 3
  • 27
  • 54