title: How can i make a curved text underline?
body: <p>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.</p>
  
  <p>Here's an example: <a href="https://i.stack.imgur.com/SLUcq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SLUcq.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>So far, I've only managed to come up with this:</p>
  
  <pre><code>    .swoosh1 {
        width: 500px; 
        height: 100px;  
        border: solid 5px #cb1829;
        border-color: #cb1829 transparent transparent transparent;
        border-radius: 50%/100px 100px 0 0;
      }
  </code></pre>
  
  <p>Which looks like this (don't worry about the font): :( <a href="https://i.stack.imgur.com/NoxJj.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NoxJj.png" alt="enter image description here"></a></p>
  
  <p>Does anyone have any pointers? Done it before?</p>