用填充和替代顏色添加上划線和下划線

Question

如標題所述，我正在尋找有關在標題文本頂部添加顏色與文本不同的行的幫助。 我嘗試在類中使用上划線和下划線添加填充，邊距和顏色，但沒有任何效果。 這是我的HTML和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> 

這是我要顯示的效果：

Answer 1

您可以使用:after和:before偽元素添加行。 這是一個例子：

 .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> 

希望對您有幫助。

Answer 2

另一種方法是使用border屬性：

 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

關於漸變的另一個想法，您將可以更加靈活地控制顏色和大小：

 .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>