ラウンドキャップはCSS

Question

に下線？どうやって？

border-bottomでこれを行う方法はありますか？ border-radiusではなく、このスタイリッシュな効果を生み出す：

Answer 1

編集：私はwated何hpique missunderstoodが、これは動作するはずです：

HTML：

<div id="test">Hello world</div> 

はCSS：

#test { 
    font-size: 50px; 
    background: transparent; 
    border-radius: 10px; 
    height: 10px; 
    width: 255px; 
    box-shadow: 0 55px 0 0 #000; 
    font-family: sans-serif; 
} 

は基本的に私はdiv要素にテキストを入れています、ボックスの影は、そのdivのセットheightとと同じサイズで、ちょうどheight/で再生されます10あなた、あなたが望む結果を得る必要があります...

JSBin Demo

デモからのスクリーンショット：

Answer 2

いいえ、あなたは純粋にHTML +テキストの下に座って二次的要素を必要とCSSでこれを行う、そしてそれに湾曲し、背景色を適用する場合。代わりに、と託す価値がある、私の意見では、イメージを使用することができます。

Answer 3

はい、それが可能です。コンテンツのない:afterを使用してブロック要素を追加し、そのようにそれに所望の幅/高さを与える：ここ

h1:after { 
    content:""; 
    float:left; 
    background:green; 
    width:100%; 
    height:6px; 
    border-radius: 3px; 
} 

フィドル：youtagの答えのようhttps://jsfiddle.net/toqL0agq/1/

Answer 4

、私の解決策は、擬似要素を-が、使用して、私の下線がのみ動作しますテキストの長さで、複数の行に折り返すことができます（各行の下に下線が引かれます）。

基本的に、私は手動で要素の前と後の擬似要素の円で要素の境界線の両端をキャップ：両端が付着しないよう

h1 a { 
    text-decoration: none; 
    position: relative; 
    border-bottom: 15px solid; 
    padding-bottom:3px; 
} 

    h1 a:hover, h1 a:focus { 
    border-bottom: 15px solid #eb6d32; 
} 

h1 a:before, h1 a:after { 
    content: ''; 
    height: 15px; 
    width: 15px; 
    background-color: currentColor; 
    border-radius: 15px; 
    position: relative; 
    display: inline-block; 
    vertical-align: text-bottom; 
    margin-bottom: -18px; 
} 

h1 a:before { 
    left: .2ex; 
    margin-left: -.4ex; 
} 

h1 a:after { 
    margin-right: -.4ex; 
    right: .2ex; 
} 

私が擬似要素にleftとrightを使用テキストを過ぎて遠すぎる

私のcodepenを参照してください。

Answer 5

これを行うには、テキストの下にあるdivを使用し、border-radiusを2000pxに設定します。

<div class="wrapper"> 
    <span>Hell World</span> 
    <div class="underline"></div> 
</div> 

CSS：

.underline{ 
    height:0px;border: 3px solid black; 
    border-radius: 2000px; 
} 
.wrapper{ 
    display:inline-block; 
} 

jQueryのSNIPPET：

var arbitrarynumber = 5 
$('.underline').width($('.underline').parent().width()-arbitrarynumber)