divの指定された位置にhr行を挿入する方法は？

Question

div.test{width:100px;height:100px;border:1px solid red;} 

cssは、幅100px、高さ100pxのボックスを作成します。
どのようにして、座標（0,50）で始まり、div.testの座標（100,50）で終わるhr線を描くことができますか？

Answer 1

、div.testに（100,50）座標で終わり？

擬似要素を使用して、親に対して絶対的に位置する水平線を描画します。

div.test { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 1px solid red; 
 
    position: relative; 
 
} 
 

 
.test::after { 
 
    content: ''; 
 
    border: 1px solid black; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    right: 0; 
 
}

<div class="test"></div>

Answer 2

これに応じて<hr>を配置します。座標（0,50）で始まる時間ラインを描くことができますどのように

div.test{width:100px;height:100px;border:1px solid red;} 
 
hr { 
 
    position: relative; 
 
    z-index: -1; 
 
    margin-top: -50px; 
 
    width: 100px; 
 
    margin-left: 0px; 
 
}

<div class="test"></div> 
 
<hr>

Answer 3

あなたはあなたの時間に50％のマージントップを与えた場合はどう？

CSS

#line{ 
    margin-top:50%; 
} 

HTML

<hr id="line" /> 

Answer 4

hr { 
    margin-top: -50px; 
    width: 100px; 
    margin-left: 0px; 
}