我正在尝试在同一文本中添加两个不同的颜色下划线,但是无法设置第二个下划线,从第一行开始下划线。
以下是link example“点击此处查看” 检查此 页面的其他会议 , 教会服务 的标题下划线。
.zaptitle {
margin-bottom:20px !important;
}
.home_widget .page_title_s2, .home_widget .page_title_s3, .home_widget .page_title_s4,
.page_title_testimonials, .zaptitle {
border-bottom-color:#EDEDED;
border-bottom-style:solid;
border-bottom-width:1px;
color:#545454;
float:left;
font-family:Arial, sans-serif;
font-size:16px;
font-weight:bold;
margin:0 0 20px;
min-height:30px;
padding:0;
position:relative;
width:100%;
}
和
<div class="zaptitle page_title_s2 ">
<span class="page_info_title_s2" style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(16, 185, 185);">Latest News</span>
</div>
答案 0 :(得分:0)
答案 1 :(得分:0)
关于CSS的美妙之处在于事情并不像他们似乎一样。您可以使用其他元素创建这样的行。
HTML:
<div id="hello">hello</div>
<div id="left_line"></div>
<div id="right_line"></div>
CSS:
#left_line {
background-color:black;
margin-right:90%;
float:left;
width:10%;
height:1px;
}
#right_line {
background-color:red;
float:right;
width:80%;
height:1px;
position:absolute;
left:10%;
}
答案 2 :(得分:0)
请在现有的CSS中添加以下代码: -
.page_info_title_s2{
position: relative;
float: left;
padding-bottom: 10px;
line-height: 20px;
top: 1px;
vertical-align: baseline;
}
使用上面的代码进行精确的行覆盖。看到工作小提琴: -