Как добавить двойную рамку-дно к h2, используя CSS?

Question

Я хочу добавить этот тип границы-дна для h2 в CSS:

Я попробовал следующий код в CSS:

 h2 {
        font-size: 16px;
        color: rgb(239, 112, 96);
        border-bottom: 2px solid rgb(239, 112, 96);
        padding-bottom: 5px;
  }

 h2::after {
        content: "";
        display: block;
        border-bottom: 2px solid rgb(239, 112, 96);
        width: 25%;
        position: relative;
        bottom: -9px; /* your padding + border-width */
  }

и следующий код в уценке:

## Statistics Programs

Я получил почти идеальный результат. Однако толстое дно автоматически не равно длине текста h2.

Итак, могу ли я изменить только код CSS чтобы получить идеальный эффект?

Answer 1

Вы можете попробовать как ниже:

h2 {
  font-size:40px;
  display:inline;
  border-bottom:5px solid red;
}
h2::after {
  content:"";
  display:block;
  border-top:3px solid red;
  margin-top:4px;
}

<h2>A title here</h2>
<p> more text here</p>

Также как это:

h2 {
  font-size:40px;
  display:inline;
  border-bottom:5px solid red;
}
h2 + hr {
  border-top:3px solid red;
  margin-top:4px;
}

<h2>A title here</h2>
<hr>
<p> more text here</p>

Answer 2

html:

<div class="container">
    <span class="child">
       Hello World
    </span>
</div>

css:

.container {
    border-bottom: 2px solid red;
}

.child {
    border-bottom: 2px solid red;
}

Answer 3

Вот как это можно сделать:

HTML

<div class="container">
  <h2>Statistics Programs</h2>
</div>

CSS

  .container {
    border-bottom: 2px solid rgb(239, 112, 96);
   }
  .container h2 {
    font-size: 16px;
    color: rgb(239, 112, 96);
    /* border-bottom: 2px solid rgb(239, 112, 96); */
    padding-bottom: 5px;
    display: inline-block;
    margin-bottom: 0;
   }

   .container h2::after {
     content: "";
     display: block;
     border-bottom: 2px solid rgb(239, 112, 96);
     width: 100%;
     position: relative;
     bottom: -5px; /*your padding + border-width */
   }

Ссылка на демо: https://stackblitz.com/edit/angular-dpw8xr