如何用CSS给h2添加双边框-底?

问题描述 投票:1回答:3

我想在CSS中为h2添加这样的边框-底部。

The effect supposed to be

我在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文本的长度。

effect I got

那么,我是否可以 单独修改CSS代码 来获得理想的效果?

css markdown
3个回答
2
投票

你可以试试下面的代码。

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>

0
投票

以下是你可以实现的方法。

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.comeditangular-dpw8xr。


0
投票

html:

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

css。

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

.child {
    border-bottom: 2px solid red;
}
© www.soinside.com 2019 - 2024. All rights reserved.