Round cap underline in CSS

Question 1

EDIT: I missunderstood what hpique wated, but this should work:

#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 id="test">Hello world</div>

Basically I'm putting the text on a div, and the box shadow will be of the same size as the set height and width for that div, just play with the height/width and you should get what you want...

JSBin Demo

Screenshot from the Demo:

This should be what was expected...

Question 2

Yes, it’s possible. Add a block element using :after with no content and give it desired width/height like so:

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

Fiddle here: https://jsfiddle.net/toqL0agq/1/

Question 3

I tried doing this same thing with the accepted answer, but found I was still getting the undesired result shown in the question. You can achieve this with a psuedo class:

HTML:

<span class="kicker">Hello World</span>

CSS:

.kicker {
font-size: 1rem;
position: relative;

&:after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
}

}

Question 4

One of the tricks i just learned is instead of working with div borders try adding an :after selector to the heading like :

h1:after{
  content: " ";
  display: block;
  width: 1.5em;
  height: .2em;
  background-color: #f0860c;
  border-radius: 10px;
}

<!DOCTYPE html>

<html>
  <head>
  </head>
  <body>
    <h1>test</h1>
  </body>
</html>

Question 5

No. If you want to do this purely with HTML+CSS you would need a secondary element to sit beneath the text, and then apply curvature and background colour to that. Alternatively, and cringe-worthy, in my opinion, you could use an image.

Question 6

Like youtag's answer, my solution uses pseudo-elements—but my underline only runs the length of the text and can wrap onto multiple lines (with an underline running beneath each line of text).

Basically, I manually cap the ends of the element's border with pseudo-element circles before and after the element:

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;
}

I use left and right on the pseudo-elements so the ends don't stick out too far past the text.

See my codepen.

Question 7

you can do that by using a div beneath the text and setting its border-radius to 2000px. i think that will be simpler

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)