html - 我如何使用 hr 获取他父 div 的全宽？

Question

我有这段代码，我正在尝试让 hr 在文本开始时开始，在文本结束时结束，这可能吗？实际上它只需要初始宽度屏幕

.slider-single {
  white-space: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
}

a {
  text-decoration: none;
  color: red;
  font-weight: 800;
  margin-left: 3rem;
}

hr {
  background-color: blue;
}

<div class="slider-single">
  <div>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
  </div>
  <hr>
</div>

Answer 1

将内部 div 设为 inline-block 并为其添加 border-bottom

.slider-single {
  white-space: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
}
.slider-single > div {
  display:inline-block;
  padding-bottom:10px;
  border-bottom:1px solid blue;
  margin-bottom:10px;
  margin-left: 3rem;
}
a {
  text-decoration: none;
  color: red;
  font-weight: 800;
}
a:not(:first-child) {
  margin-left: 3rem;
}

<div class="slider-single">
  <div>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
    <a href="#info">Test</a>
  </div>
</div>