如何设置<hr /> html元素的样式?

时间:2014-12-11 17:56:19

标签: html css

我需要设置与图片中显示的类似的<HR>样式:它就像两条线一条在另一条线上。我已经看到了这个,然后我想它可以做到,但我不记得在哪里。

enter image description here

到目前为止我得到了这个css代码,但我只得到了蓝线:

hr {
margin: 0px auto 10px;
background: #009edf;
width: 200px;
text-align: center; }

3 个答案:

答案 0 :(得分:5)

您可以这样做:

hr {
    height:2px;
    border:0;
    background-color: #444;
    line-height:20px;
    cursor: pointer;
}

hr:before {
  content: '';
  display: block;
  height: 1px;
  background-color: #111;
}

hr:after {
    content: 'O';
    color:#ccc;
    display:block;
    text-align:center;
    background-color:#222;
    width:60px;
    margin-top:-10px;
    position:absolute;
    left:50%;
    -webkit-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -ms-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);  
}
<hr>

答案 1 :(得分:2)

使用:before:伪元素。

&#13;
&#13;
hr {
  position: relative;
  border: 0;
  border-top: 2px solid #B2B2B2;
}
hr:before {
  content: '';
  position: absolute;
  width: 60%;
  height: 0;
  border-top: 6px solid #0093E6;
  color: blue;
  left: 20%;
  top: -4px;
}
&#13;
<hr />
&#13;
&#13;
&#13;

答案 2 :(得分:0)

这应该可以解决问题,

hr{
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.1);
    height: 2px;
    background: transparent;
}