Javascript 在边框线的位置插入空格

我正在使用css显示一条水平线：

.horizontalLineBottom {
    border-bottom:solid #6E6A6B;
    border-width:1px;
}

我可以在这条线上指定一个位置吗

所以

变成

______________________________             ___

没有，块中有边框（只是块的边框）

---

如果背景图像符合您的需要，您可以添加背景图像。

:after

或

:before

psuedo类可以帮助您。就像这样：

---

您无法通过CSS直接实现这一点。 我建议两种解决方案 1）您可以使用u字符，使其看起来像一条线，并在任何需要的地方插入空格，并通过CSS赋予颜色属性。 2） 使用两个元素，第一个元素有一些宽度和一些右边空白。

---

右边空白将为您提供所需的空间

您可以在元素上使用

背景

渐变： 然后，您可以创建任意多个

.line {
    margin: 10px;
    height: 1px;
    width: 400px;
    background:  -webkit-linear-gradient(
        left, gray 10%, white 10%, white 40%, 
        gray 40%, gray 60%, 
        white 60%, white 80%,
        red 80%, red 100%);
}

---

您不能直接执行此操作，但需要使用一个伪元素进行小的变通。诀窍是创建一个与元素下面的背景颜色相同的小覆盖

.verticalLineBottom { 
  position: relative; 
  border-bottom: 1px solid #6E6A6B; 
}
.verticalLineBottom:after { 
  content: ""; 
  position: absolute; 
  right: 20px; 
  bottom: -1px; 
  width: 100px; 
  height: 1px; 
  background: #fff;
}

例如：

---

不幸的是，如果元素背后的背景有一个模式，它就不起作用。

我为您创建了这段代码，它伪造了您要查找的结果

.stopped-line {
  /* basic styles here */

  width: 100px; /* this is mandatory */
  position: relative;
}
.stopped-line:before {
  position: absolute;
  bottom: 0;
  display: block;
  width: 70%; /* width in percentage of the line */
  content: " ";
  height: 1px; /* thickness of the line */
  background: #000; /* color of the line */
}
.stopped-line:after {
  position: absolute;
  bottom: 0;
  left: 80%; /* Where should the second line start? */
  display: block;
  width: 20%; /* width in percentage of the line */
  content: " ";
  height: 1px; /* thickness of the line */
  background: #000; /* color of the line */
}

---

JSBin:

另一种使用

边框宽度的解决方案：

.line {
    width: 20px;
    height: 1px;
    padding: 0;
    border-width: 0 100px 0 150px;
    border-style: solid;
    border-color: red;
}

没有。不过，你可以用多种元素来伪装它。或者边框图像。你说这是垂直线，但你展示了水平线的例子。@有抱负的Aqib谢谢，问题更新了补充你需要用这条线做什么，但是CSS只需要一个元素就可以了。至少有两个解决方案，其中一个已经在下面使用
：after
，
：before
@dfsq发布了fiddle。第二个解决方案在哪里？然后只需为另一个browsersAFAIK添加前缀，即还不支持这一点。FF仅适用于特定版本。就跨浏览器而言，这不是一个好的解决方案。你说的FF版本是什么？啊，非常好的人。但仅限于当用户希望显示该行时。如果要用作div边框，则与我相同，例如多个元素。但是仍然+1表示努力。对，正如我所说的，为了更好的解决方案，我们需要知道OP到底想用这句话做什么。IDK，为什么发问者在发问后睡觉。必须在5分钟内上班。在SO上提问或在Reddit上发表AMA的最佳时机。
.stopped-line {
  /* basic styles here */

  width: 100px; /* this is mandatory */
  position: relative;
}
.stopped-line:before {
  position: absolute;
  bottom: 0;
  display: block;
  width: 70%; /* width in percentage of the line */
  content: " ";
  height: 1px; /* thickness of the line */
  background: #000; /* color of the line */
}
.stopped-line:after {
  position: absolute;
  bottom: 0;
  left: 80%; /* Where should the second line start? */
  display: block;
  width: 20%; /* width in percentage of the line */
  content: " ";
  height: 1px; /* thickness of the line */
  background: #000; /* color of the line */
}

.line {
    width: 20px;
    height: 1px;
    padding: 0;
    border-width: 0 100px 0 150px;
    border-style: solid;
    border-color: red;
}