css под строкой 2 цвета

-1

Я пытаюсь добавить два разных цвета подчеркивания в том же тексте, но не могу установить 2-ую подчеркивание, с которой она сходила с первой строки.css под строкой 2 цвета

Вот link example "нажмите здесь для exmple" проверить подчеркивание в названии по этим страницы Других Meetings, Церкви Услуга.

.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>

источник

2013-09-25 Hardy

Можете ли вы сказать мне, что вы хотите достичь? –

Я не понял вопроса. Если вы хотите, чтобы зеленая подчеркивание смещалась ниже, добавьте «padding-bottom». – Harry

Взгляните на мой ответ [здесь] (http://stackoverflow.com/questions/18949867/double-border-with-only-one-element/18954680#18954680) – avrahamcool

вам просто нужно добавить этот класс

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

это работает Fiddle

источник

2013-09-25 11:05:00

Большое спасибо. – Hardy

@ Харди: ваш приветствую :) –

thanx много sir – Hardy

Прелесть о 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%; 
}

источник

2013-09-25 11:08:06 OriShuss

Пожалуйста, добавьте следующий код в ваш существующий 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/

источник

2013-09-25 11:26:43

css под строкой 2 цвета

ответ

Смежные вопросы