テキストにカスタマイズされた境界線を作成する方法

Question

下の図のように境界をどのように取得できますか？知られているよう

、私はテキストのborder-bottomを試みました。しかし、このような国境の考えを得ることはできません。疑似要素で試してみますか？

Answer 1

h1 { 
 
    display:inline-block; 
 
    position:relative; 
 
    padding-bottom:4px; 
 
} 
 
h1:before { 
 
    display:block; 
 
    content:""; 
 
    width:70%; 
 
    height:1px; 
 
    background:orange; 
 
    position:absolute; 
 
    left:50%; 
 
    bottom:0; 
 
    transform:translate(-50%); 
 
} 
 
h1:after { 
 
    display:block; 
 
    content:""; 
 
    width:20%; 
 
    height:4px; 
 
    background:orange; 
 
    position:absolute; 
 
    left:50%; 
 
    bottom:-4px; 
 
    transform:translate(-50%); 
 
}

<h1> 
 
Vijay Kumar 
 
</h1>

Answer 2

あなたが要素の下に2行を作成しposition: absoluteを使用して位置決めする:beforeと:after擬似要素を使用することができます。

h1 { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 25px; 
 
} 
 
h1:after, 
 
h1:before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: -2px; 
 
    height: 1px; 
 
    width: 60%; 
 
    left: 0; 
 
    background: #C0932E; 
 
    transform: translateY(100%); 
 
} 
 
h1:after { 
 
    height: 3px; 
 
    width: 30%; 
 
} 
 
.center:before, 
 
.center:after { 
 
    left: 50%; 
 
    transform: translate(-50%, 100%); 
 
} 
 
.start:before { 
 
    width: 100%; 
 
}

<h1 class="start">LOREM IPSUM</h1><br> 
 
<h1 class="center">Lorem ipsum dolor.</h1>

Answer 3

これを試してみてください。

h1 { 
 
    border-bottom: 2px solid orange; 
 
    width: 200px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
h1:after{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100px; 
 
    border-bottom: 3px solid orange; 
 
    top: 39px; 
 
    left: 50px; 
 
}

<h1>This is Test</h1>