尝试将hr标签设置为具有端盖的样式

Question

我正在尝试将hr标记设置为具有附加图像的端盖。虽然我可以从该图像中删除背景并将其设置为背景，但这不会改变页面的宽度。目前，如何正确地做到这一点是我的目标。

Image of the desired hr.

Answer 1

你走了。的 https://jsfiddle.net/mkarajohn/sfr5kw4e/

hr {
  height: 4px;
  background: black;
  border: none;
  position: relative
}

hr::before,
hr::after {
  position: absolute;
  content: '';
  width: 12px;
  height: 12px;
  border-radius: 100px;
  background: black;
  bottom: -4px;
}

hr::before {
  left: 0;
}

hr::after {
  right: 0;
}

考虑一下你是否真的需要一个hr，而不是一个简单的div

Answer 2

你可以在伪元素之后使用。类似的东西：

hr:before {
  content: "";
  position: absolute;
  display: block;
  width: 6px;
  height: 6px;
  background-color: blue;
  top: 6px;
  left: 6px;
  border-radius: 50%;
}

请参阅此codepen http://codepen.io/anon/pen/dMpJXR

Answer 3

使用before和after伪类：

设置<hr>样式的关键还在于用边框替换浮雕线。圆形端盖是通过使用before渲染after和border-radius块来完成的，这些块使它们成为圆圈：

hr {
    border: 0 solid black;
    border-top-width: 3px;
    height: 0;
    margin-top: 10px;
    margin-bottom: 60px;
    float: left;
    clear: both;
    display: block;
    width: 100%;
    position: relative;
}
hr:before, hr:after {
    content: " ";
    width: 10px;
    height: 10px;
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid black;
    background-color: black;
    }
hr:before {
    left: 0;
    bottom: -4px;
}
hr:after {
    bottom: -4px;
    right: 0;
}

Here's a JSBin