javascript - 如何将hr行放在div中的指定位置？

Question

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

CSS 将创建一个宽度为 100 像素、高度为 100 像素的框。
如何在 div.test 中绘制以坐标 (0,50) 开始，以坐标 (100,50) 结束的 hr 线？

Answer 1

How can draw a hr line which begins with coordinate (0,50) ,ends with coordinate(100,50) in the div.test?

使用伪元素绘制相对于父元素绝对定位的水平线。

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>