How can i make a curved text underline?

Question

I'm trying to use CSS and HTML to create a text underline that's curved. The curve in particular has been referred to as a "swoosh" in the design brief I was given, it needs to fall short of the first and last letter (i.e. to underline "help you", it would start at "e" and end at "o" - this part I figure is easy, applying the style to a span tag without the first and last letter), and has to have rounded ends. The swoosh is also not even.

Here's an example:

I'm not super crash hot with CSS, but I know I'm constrained to CSS and HTML in this case - no HTML5 or using javascript to get it done.

So far, I've only managed to come up with this:

    .swoosh1 {
      width: 500px; 
      height: 100px;  
      border: solid 5px #cb1829;
      border-color: #cb1829 transparent transparent transparent;
      border-radius: 50%/100px 100px 0 0;
    }

Which looks like this (don't worry about the font): :(

Does anyone have any pointers? Done it before?

Answer 1

You can use :after pseudo-element to hold your underline:

.underlined {
  position: relative;
  margin-right: 1rem;
}
.underlined:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  height: 7px;
  width: 100%;
  border: solid 2px #cb1829;
  border-color: #cb1829 transparent transparent transparent;
  border-radius: 50%;
}
.small {
  font-size: 60%;
}
.big {
  font-size: 200%;
}

<span class="underlined">Test</span>
<span class="underlined small">Test</span>
<span class="underlined big">Test</span>

Answer 2

Use :after and then use border and radius and position it

Learn about pseudo:https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

.text:after{
    content: "";
    position: absolute;
    height: 15px;
    width: 70px;
    left: 5px;
    top: 37px;
    border-top: 2px solid red;
    border-radius: 50%;
}
.text{
 font-family: "Comic Sans MS", cursive, sans-serif;
color:red;
}

<p class="text">Your local</p>