Html 如何将两种颜色应用于标题标记的下边框?
我有一个带有CSS的h2标签:Html 如何将两种颜色应用于标题标记的下边框?,html,css,Html,Css,我有一个带有CSS的h2标签: h2 { display: inline-block; border-bottom: 3px solid #ffcc00; padding-bottom: 30px; color: #5e5e5e; font-size: 23px; font-weight: 400; line-height: 18px; text-align: left; margin: 30px 3px; } 看起来是
h2 {
display: inline-block;
border-bottom: 3px solid #ffcc00;
padding-bottom: 30px;
color: #5e5e5e;
font-size: 23px;
font-weight: 400;
line-height: 18px;
text-align: left;
margin: 30px 3px; }
看起来是这样的:
但我想用不同的边框填充“剩余宽度”。它一定是这样的:
使用伪类
:在
HTML
演示:它工作不完全正确。后一行比h2低很多。
h2{
display: inline-block;
border-bottom: 3px solid #ffcc00;
padding-bottom: 30px;
color: #5e5e5e;
font-size: 23px;
font-weight: 400;
line-height: 18px;
text-align: left;
margin: 30px 3px;
position:relative; /*add this*/
}
h2:after{
content:'';
display:inline-block;
position:absolute;
width:80%;
background:#e6e6e6;
height:3px;
top:100%;
}
<h2>
<span>Some header</span>
</h2>
h2 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: lightgray;
}
span {
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: orange;
padding: 30px 3px;
margin: 0 0 -2px 0;
display: inline-block;
}