如何让 html hr 标签在调整页面大小时停止重叠到附近的文本上 - 使用 Bourbon Neat 网格框架

Question

我有一些文本，一个页面标题，然后在同一行的标题右边是一个 hr-tag 垂直居中。一切都使用 Neat 的网格框架定位。它在很大程度上是响应式的 - hr 行调整大小等。但也开始重叠到它左侧的某个点的文本上。

我怎样才能避免这种情况？我不应该使用 hr 标签吗？如果没有，有哪些替代方案？

最终目标是拥有像这样的东西 "Page Title -----------------------" 线条是实心的、垂直居中的和响应式的。

解决方案、想法、建议??

Answer 1

您可以使用 after 伪元素获得同样的效果：

.line {
  overflow: hidden;
  position: relative;
}

.line::after {
  content: '';
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid gray;
  position: absolute;
  bottom: 0.5em;
  margin-left: 0.5em;
}

Fiddle

如何让 html hr 标签在调整页面大小时停止重叠到附近的文本上 - 使用 Bourbon Neat 网格框架

How to get html hr tag to stop overlapping onto nearby text when page is resized - using Bourbon Neat grid framework

html

css

neat