自定義下劃線效果，除了爲它創建背景圖像

Question

有沒有更好的方式通過CSS創建這種「下劃線」風格，而不是爲它創建背景圖像？

爲了清楚起見，我只對「重複線條」效果感興趣，一條較粗且較短的線條直接坐落在不同顏色的較薄和較長的線條的上方。謝謝！

Answer 1

你可以在這裏使用僞元素，即:before和:after。在這裏，我正在做什麼，使用h1元素，它顯示爲inline-block。後來，我們需要使用CSS定位來設置兩個底部邊框，因爲邊框比您的元素更小。

後來，再次使用CSS定位，我們將較小的border放在較大的位置上。請注意，我正在使用left: 50%;和transform: translateX(-50%)將邊框放置在水平中央。

請確保您不會錯過z-index，因爲在這裏使用它非常重要，否則其他邊框會在較小的邊框上呈現。

@import url('https://fonts.googleapis.com/css?family=Varela+Round'); 
 

 
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
h1 { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-family: Varela Round; 
 
    font-size: 24px; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    color: #401f1c; 
 
    margin: 40px; /* not required, only for demo purpose */ 
 
} 
 

 
h1 span { 
 
    color: #efcc4c; 
 
} 
 

 
h1:before, 
 
h1:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
h1:before { 
 
    bottom: -11px; 
 
    width: 40px; 
 
    border-bottom: 3px solid #efcc4c; 
 
    z-index: 1; 
 
} 
 

 
h1:after { 
 
    width: 80%; 
 
    border-bottom: 1px solid #ddd; 
 
    bottom: -10px; 
 
}

<h1>Our <span>Services</span></h1>

編輯：重構我的代碼，使演示更加precisee。

Answer 2

試試這個

HTML

<div class="text"> 
    <span>our</span> 
    Services 
</div> 

CSS

.text{ 
    font-weight:600; 
    font-size:25px; 
    color:red; 
    position: relative; 
    display:inline-block; 
} 
.text::after, 
.text::before{ 
    content:""; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: -5px; 
    margin:auto; 
    border-radius:5px; 
    height:0px; 
} 

.text::before{ 
    width:100%; 
    border:1px solid #ccc; 
} 
.text::after{ 
    width:50%; 
    border:2px solid red; 
    bottom:-6px; 
} 

.text span{ 
    color:#000000; 
} 

Link for reference

希望這有助於..

Answer 3

我總是創造「迪維DER」，如：

<div class='divider'> 
    <div class='divi-1'></div> 
    <div class='divi-2'></div> 
    <div class='divi-3'></div> 
</div> 

CSS：

.divider{ 
    padding-top:15px; //or other 
    text-align:center; 
    display:block; // or column in bootstrap like col-md-12 
} 

.divider .divi-1{ 
    display:inline-block; 
    height:2px; //or other 
    width:50px; // or other 
    background:#e5e5e5; 
. 

.divider .divi-2{ 
    display:inline-block; 
    height:2px; 
    width:50px; 
    background:#000000; 
} 
.divider .divi-1{ 
    display:inline-block; 
    height:2px; //or other 
    width:50px; // or other 
    background:#e5e5e5; 
} 

就是這樣。你也可以使用vertical-align作爲內聯塊，所以你有更多的選擇來垂直移動線條，並且它在流動中，所以你知道它有多大，並且可以確定其他元素不會重疊。