我想在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代码 来获得理想的效果?
你可以试试下面的代码。
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>
以下是你可以实现的方法。
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 */
}
html:
<div class="container">
<span class="child">
Hello World
</span>
</div>
css。
.container {
border-bottom: 2px solid red;
}
.child {
border-bottom: 2px solid red;
}