css下划线两种颜色答案

【问题标题】：css under line two colorcss下划线两种颜色
【发布时间】：2013-09-25 10:53:43
【问题描述】：

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

这里是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>

【问题讨论】：

你能告诉我你想达到什么目标吗？
我不明白这个问题。如果您希望绿色下划线移到下方，请添加padding-bottom。
看看我的回答here

标签： css underline

【解决方案1】：

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】：

请在您现有的 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/

【讨论】：

【解决方案3】：

你只需要添加这个类

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

这是有效的Fiddle

【讨论】：