1. Tutorials
  2. CSS
  3. Curved Text Underline

Curved Text Underline

In this tutorial, you will learn how to easily add a curved underline to a text with pure CSS. Watch the video below for a detailed tutorial.

HTML

<body>
    <p><span class="underline">Lorem</span> ipsum dolor sit amet.</p>
</body>

CSS

body {
  background: #2e3537;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Roboto", sans-serif;
}

p {
  color: white;
  font-size: 40px;
}

.underline {
  position: relative;
}

.underline:after {
  content: '';
  position: absolute;
  width: 100%;
  border-top: solid 3px red;
  left: 0;
  bottom: -10px;
  border-radius: 50%;
  height: 8px;
}