时间戳

首页 > 解决方案 > 如何使用 CSS 向 h2 添加双边框底部？

css - 如何使用 CSS 向 h2 添加双边框底部？

问题描述

我想在 CSS 中为 h2 添加这种边框底部：

效果应该是

我在 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 */
  }

以及markdown中的以下代码：

## Statistics Programs

我得到了一个几乎完美的结果。但是，厚底不会自动等于 h2 文本的长度。

我得到的效果

那么，我是否可以单独修改 CSS 代码以获得理想的效果呢？

标签： cssmarkdown

解决方案

您可以尝试如下：

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>

推荐阅读