underline with decreasing thickness style-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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>

CodePudding user response：

you should use SVG or can try pseudo-selectors (::before,::after)

    div.text {
       position:relative;
    }
    div.text::after{
            content:'';
            position:'absolute';
            bottom:0;
            left:0;
            height:1px;
            width:100%;
            background-color:red;
    }

<div class='text'>Training and Development</div>