用填充和替代颜色添加上划线和下划线

Question

As the title says, I'm looking for help with adding lines on top of a header text with a different color than the text. I tried adding padding, margin and color in the class with overline and underline to no effect. Here is my HTML and CSS:

 .lines { text-decoration-line: overline underline; margin: 20px; } 

 <div class="row"> <div class="col-md-7 justify_text"> <h2 class="lines">WHO WE ARE</h2> <div class="col-md-5"> <img src="img/pic2.jpg" class="img-responsive"> </div> </div> </div> 

Here is the effect that I want to show:

Answer 1

You can use the :after and :before pseudoelemnts to add the lines. Here is an example:

 .lines { position: relative; padding: 10px 0; } .lines:before { content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 2px; background: red; } .lines:after { content: ''; position: absolute; bottom: 0; left: 0; width: 30%; height: 2px; background: blue; } 

 <div class="row"> <div class="col-md-7 justify_text"> <h2 class="lines">WHO WE ARE</h2> <div class="col-md-5"> <img src="img/pic2.jpg" class="img-responsive"> </div> </div> </div> 

Hope it helps you.

Answer 2

Another way to do it is to use border properties :

 h2 { display: inline-block; border-top: 2px solid green; border-bottom: 2px solid orange; padding-top: 10px; padding-bottom: 10px; } 

 <h2>WHO WE ARE</h2> 

Answer 3

Another idea with gradient and you will have more flexibility to control colors and sizes:

 .lines { position: relative; padding: 10px 0; display:inline-block; background: linear-gradient(red,red) top center/100% 2px, linear-gradient(blue,blue) bottom center/80% 2px; background-repeat:no-repeat; } 

 <h2 class="lines">WHO WE ARE</h2>