How can i make a curved text underline?

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?

2 Answers
2

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

:after

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

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

:after

border

radius

position

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.