1

Any idea how to implement this decreasing thickness underline using css: (Example image)

I've tried to use border bottom, but couldn't give the decreasing thickness effect

2 Answers 2

4

It's not just underline or border;

You should use :before in CSS and position: absolute; on it and position: relative; on the parent.

The code would be:

    .underline {
        position: relative;
        font-size: 32px;
    }

    .underline:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 0;
        border-bottom: 5px solid orange;
        border-right: 300px solid transparent;
        z-index: -1;
    }
<span class="underline">Training & Development</span>

border-bottom: 5px <- here you can set the starting height of the underline.

border-right: 100px <- here you can set the width of the underline.

Read more about creating shapes in CSS here: https://css-tricks.com/the-shapes-of-css/

1
3

You can use clip-path property. For more link

p {
  position: relative;
  font-size: 30px;
  width: fit-content;
}

p span {
  position: relative;
  z-index: 2;
}

p:after {
  background: orange;
  clip-path: polygon(0 80%, 0% 100%, 100% 100%);
  position: absolute;
  width: 80%;
  content: '';
  height: 100%;
  left: 0;
  bottom: 0;
}
<p>
  <span>Training & Development</span>
</p>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.