創建一個分隔符

我想要完成的是在一個div中創建最新消息下的行而不需要圖像。我想過邊界，但我不知道如何做到這一點。我用pseudoelements（：before，：after）嘗試過，但他們似乎以非常奇怪的方式彌補了佈局。有人得到了一個ideea？或者至少，如果它不能做我怎麼想，我必須知道創建一個分隔符

<div id="footer"> 
    <div class="container"> 
     <div class="row"> 

      <div class="col-lg-3 col-md-3 col-sm-3"> 
       <h4>Latest News</h4> 
       <p> 
        Consectetur adipisci. Belit, sed quia 
       </p> 
       <hr> 
       <p> 
        Non numquam eius modi tempora 
       </p> 
       <hr> 
       <p> 
        Incidunt, ut labore et dolore ater 
       </p> 
       <hr> 
       <p> 
        Magnam aliquam quaerat dolores. 
       </p> 
       <hr> 
       <br> 
       <h4> Subscribe Via Email </h4> 
      </div> 
     </div> 
</div>

這就是我打算把它。正如你可能已經想通過使用bootstrap 3框架

來源

2013-12-22 morgred

好了，哪來的你試過到目前爲止的CSS？ – Doorknob

我會使用a：before或：after元素。

h1 { 
    position: relative; 
    border-bottom: 1px solid #bbb; 
} 

h1:before { 
    position: absolute; 
    bottom: -3px; 
    width: 100px; 
    height: 5px; 
    display: block; 
    content: ""; 
    background-color: #219fd1; 
}

這應該讓你足夠接近。

這裏是一個快速演示：http://jsbin.com/IfEzeDUT/1/edit?html,css,output

來源

2013-12-22 23:44:10

op正在尋找的確切顏色是＃219fd1' – MultiplyByZer0

我已經更新了它......但我想稍微留給OP來做。 =） –

這是最接近我想表達的，非常感謝的人。這裏是我更新的演示 http://jsbin.com/IfEzeDUT/5/edit?html,css,output 我還想知道的是：如何：之前和之後：由瀏覽器「看到」的元素。他們有自己的盒子什麼的？ – morgred

可以簡單地使用一個底部邊框將它們設置爲分隔符。
http://jsfiddle.net/notme/4V95c/

.container { 
    background-color:black; 
    color: white; 
} 

p { 
    border-bottom: 1px dotted white; 
    padding: 10px; 
    margin: 0 20px; 
} 

h4 { 
    border-bottom: 2px solid blue; 
    display:inline; 
}

來源

2013-12-22 23:48:59 pasine

DEMO

enter image description here

.col-sm-3 h4{ 
    color:#f6f6f6; 
    position:relative; 
    border-bottom: 1px solid #858686; 
    padding:15px 0; 
    margin:0; 
} 
.col-sm-3 h4:after{ 
    content:" "; 
    position:absolute; 
    height:4px; 
    width:65px; 
    bottom:-2px; 
    left:0px; 
    background:#219FD1; 
} 
/* instead of <hr> */ 
.col-sm-3 > p{ 
    margin:0; 
    padding: 10px 0; 
    border-bottom:1px dotted #858686; 
}

來源

2013-12-22 23:50:55

創建一個分隔符

回答

相關問題