How to add title bottom border with html css-CodePudding

I have been trying to add a title border with CSS. but I can't find the actual result.

.widget-title {
  font-size: 1em;
  border-bottom: 1px solid red;
  margin-bottom: 30;
  text-decoration: underline;
  text-underline-offset: 1rem;
  padding-bottom: 0.5rem;
  text-decoration-thickness: 0.1875rem;
  text-decoration-color: green;
  color: black;
}

<h1 > Widget title </h1>

CodePudding user response：

For gray line, you have to use ::before element, hope its works

.widget-title {
    font-size: 1em;
    margin-bottom: 0;
    color: black;
    position: relative;
    text-decoration: underline;
    text-underline-offset: 11px;
    padding-bottom: 10px;
    text-decoration-thickness: 3px;
    text-decoration-color: green;
  width: 33.33%
}
.widget-title:before{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #ccc;
  z-index: -1;
  height: 3px;
}



.d-flex{
  display: flex;
  gap: 30px
}

<div >
<h1 > Widget title</h1>
<h1 > Title sm</h1>
<h1 > Widget title long</h1>
</div>

CodePudding user response：

.widget-title {
    border-bottom: 1px solid #000;
    padding: 0 0 5px; 
}

Steps: 1)Add border-bottom. 2)Change the padding-bottom.

This will work. Thanks.