创建分隔符

Question

我想要完成的是在没有图像的一个div中创建最新消息下的行。我想到了边界，但我不知道如何这样做。我尝试使用伪元素（：之前，之后），但他们似乎以非常奇怪的方式来对待布局。有人有想法吗？或者至少如果不能做我想要的我必须知道

<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框架

Answer 1

我会使用：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

Answer 2

可以简单地使用border-bottom将它们设置为分隔符 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;
}

Answer 3

DEMO

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