javascript - 境界線の位置にスペースを挿入します

Question

私はcssを使用して水平線を表示しています：

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

この行の特定の位置にスペースを挿入できますか？

それで

______________________________________________

になります

______________________________             ___

Answer 1

を使用した別のソリューションborder-width：

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

http://jsfiddle.net/dfsq/Uttxy/1/

Answer 2

:afterまたは:before擬似クラスが役立ちます。このようにFiddle：

div {
    width:100px;
    height:100px;
    border:1px solid #000;
    margin:50px;
    background:yellow;
    position:relative;
}
div:after {
    content: '';
    height:60px;
    width:1px;
    position:absolute;
    top:20px;
    left:-1px;
    background:yellow;
}

Answer 3

いいえ、ブロック内の境界線はありません (ブロックの境界線のみ)。

必要に応じて、背景画像を追加できます。

Answer 4

CSS から直接これを実現することはできません。2つの解決策をお勧めします1）_文字を使用して線のように見せ、必要な場所にスペースを挿入し、CSSを介して色属性を与えることができます。2) 2 つの要素を使用します。最初の要素には幅と右マージンがあります。右マージンは必要なスペースを提供します

Answer 5

background要素にグラデーションを使用できます: http://jsfiddle.net/q652t/ その後、好きなだけ作成できます

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

Answer 6

直接行うことはできませんが、疑似要素を使用した小さな回避策があります。トリックは、要素の下の背景と同じ背景色で小さなオーバーレイを作成することです。

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

例: http://jsfiddle.net/zxdS7/

残念ながら、要素の背景にパターンがある場合は機能しません。

Answer 7

私はあなたのためにこのコードを作成しました.これはあなたが探している結果を偽造します.

.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:クリック