CSS의 둥근 뚜껑 밑줄

Question

위의 그림과 같이 CSS로 밑줄을 그릴 수 있습니까? 방법?

border-bottom과 함께 할 방법이 있습니까? border-radius 대신 세련된 효과를 :

Answer 1

편집 : 나는 hpique이 wated 무엇 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에 대해 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로 설정하면됩니다.나는 간단

HTML 될 것이라고 생각 :

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