css在线下两种颜色

时间:2013-09-25 10:53:43

标签: css underline

我正在尝试在同一文本中添加两个不同的颜色下划线,但是无法设置第二个下划线,从第一行开始下划线。

以下是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>

3 个答案:

答案 0 :(得分:0)

你只需要添加这个类

.page_info_title_s2{
    display:block;
    float:left;
    min-height:30px;
}

这是有用Fiddle

答案 1 :(得分:0)

关于CSS的美妙之处在于事情并不像他们似乎一样。您可以使用其他元素创建这样的行。

JSfiddle

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;
 }

使用上面的代码进行精确的行覆盖。看到工作小提琴: -

http://jsfiddle.net/npsingh/RgE2h/1/