how do I create underlined text with ::after and ::before pseudo elements?-CodePudding

I'm trying to create an underlined title with the after pseudo element, but a problem occurs where the element has a large width.

Making the underline bigger than the text, which I wanted to know how do I make the element the size of the text so it doesn't have to fix a size.

 * {
  box-sizing: border-box;
 }

 .c-title {
   position: relative;
   
   text-transform: uppercase;

   font-size: 1.2em;
 }

 .c-title::after {
   content: "";
   width: 100%;
   height: .2em;
   
   background-color: var(--c-title-underline-color);
   
   position: absolute;
   bottom: -2px;
   left: 0;
 }

<h1 >text...</h1>

CodePudding user response：

your color variable is not included in the CSS code. so use background instead of background-color. that's it.

* {
    box-sizing: border-box;
   }
  
   .c-title {
     position: relative;
     
     text-transform: uppercase;
  
     font-size: 1.2em;
     width: fit-content;
   }
  
   .c-title::after {
     content: "";
     width: 100%;
     height: .2em;
     
     /* background-color: var(--c-title-underline-color); */
     background: red;
     
     position: absolute;
     bottom: -2px;
     left: 0;
     
   }

<h1 >text...</h1>