not full length, rounded bottom border-CodePudding

How can I make a line under a , not stretch the whole way, lets say 70% centered and with rounded borders, see image here: https://i.imgur.com/6O7mfn3.png

this is what I got so far, but its obviously not rounded, and its goes 100% of the width of the span.

<span >
  hello space!
</span>

.button{
  border-bottom:6px solid blue;
}

CodePudding user response：

Use an ::after element.

.button {
  padding-bottom: 6px;
  position: relative;
}

.button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15%;
  width: 70%;
  height: 6px;
  background-color: blue;
  border-radius: 6px;
}

<span >
  hello space!
</span>