绘制特定宽度的边框线

Question

我想在浏览器中将Sketch文件带到HTML / CSS。

如何在小文本和大文本之间实现白线，如下图所示？

Answer 1

如果您不想添加任何其他html element，则可以使用pseduo element:after。

h2:after {
  display:block;
  content:" ";
  width: 80px;
  height: 5px;
  background: grey;
  margin-top: 5px;
}

fiddle

Answer 2

您可以添加一个带有底部边框的空div。自定义宽度，更清晰，代码更短：

＆＃13;

＆＃13;

body {
    background-color: blue;
    color: white;
}
#mydiv {
    border-bottom: 4px solid white;
    width: 33%;
}
#myline {
    height: 4px;
    background-color: white;
    border: 0px solid black;
    width: 33%;
}

＆＃13;

A div:
<div id="mydiv"></div>
A horizontal line:
<hr id="myline" />

That's 4 lines for the HR and 2 for the div, and that's without making the hr align to the left.

＆＃13;

＆＃13;

＆＃13;

如果您不想添加其他元素，可以在任何元素上使用::after - 只需将其设为display: block并设置颜色，宽度，高度等类似于上述内容代码。

Answer 3

您可以添加标记<hr>，并指定所需的宽度，高度，颜色......