[英]How to create different underline colour for my heading text in HTML?
I need to have a single underline below my heading text <h1>
tag. 我需要在标题文本
<h1>
标记下面添加一个下划线。 But the colour of the underline below text should have a different colour than rest. 但是文本下面的下划线颜色应该与其他颜色不同。
Below is the image for my requirement. 以下是我要求的图片。
What I have tried doing is placing two <div>
side by side and setting different border bottom colour. 我试过做的是并排放置两个
<div>
并设置不同的边框底色。 But this is not a best practice to follow. 但这不是最好的做法。
Please suggest some improvements to my code. 请为我的代码建议一些改进。
#left { border-bottom: 3px solid black; float: left } #right { border-bottom: 3px solid red; overflow: hidden; color: transparent; }
<div id="container"> <div id="left"> <h1>My Heading</h1> </div> <div id="right"> <h1>Transparent Text</h1> </div> </div>
You can give the parent a bottom border, set the heading to inline-block
so it's width is contained to the text size, give the heading a bottom border, then shift the heading down 3px so the borders overlap. 您可以为父级指定底部边框,将标题设置为
inline-block
,使其宽度包含在文本大小中,为标题指定底部边框,然后将标题向下移动3px,使边框重叠。
h1 { display: inline-block; margin: 0; border-bottom: 3px solid black; transform: translateY(3px); } div { border-bottom: 3px solid red; }
<div> <h1>heading</h1> </div>
You can give H1
red border and black border to the span
inside it. 您可以将
H1
红色边框和黑色边框赋予其内部的span
。 Use padding to fix the alignment of borders. 使用填充来修复边框的对齐方式。
h1 { border-bottom: 3px solid red; padding:3px 0; } h1 span { border-bottom: 3px solid black; padding:4px 0 }
<h1><span>heading</span></h1>
h1 { border-bottom: 3px solid red; padding:3px 0; position:relative; } h1:before{ position:absolute; width:100px; height:3px; background:#333; content:""; bottom:-3px; }
<h1>heading</h1>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.