How can i make a curved text underline? - html

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>

Answer 3

make sure to use : display: inline-block !important; on underlined class to be responsive.
Without : display: inline-block !important; on underlined class, it will as below on device.
.underlined {
position: relative;
display: inline-block !important;
}
.underlined::before {
content: "";
position: absolute;
bottom: -12px;
left: 0;
height: 7px;
width: 100% !important;
border: solid 8px yellow;
border-color: yellow transparent transparent transparent;
border-radius: 50%;
}
.big {
font-size: 50px;
}
<h1 class="big "> You're connected. Now, <span class="underlined "> automate!</span> </h1>