html - CSS <hr> 在文本旁边右对齐

Question

我需要一个右侧有粗笔画的 h2。像这样:

我正在努力寻找最好的响应方式来完成它。更不用说它在自定义 WP 主题中，所以我不想创建大量的页面标记，客户端会立即中断 :)

Answer 1

您需要的是单个元素和一个 :after 伪。 P.S 它是响应式的。

Demo

说明:这里主要是用overflow: hidden;在元素上，而不是使用 :after 创建虚拟元素伪 content属性(property)，我正在定位它absolute到设置为 relative 的父元素

<h2>Hello World</h2>

h2 {
  font-size: 20px;
  font-family: Arial;
  position: relative;
  overflow: hidden;
}


h2:after {
  display: inline-block;
  content: "";
  height: 4px;
  background: #f00;
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -2px;
  margin-left: 10px;
}