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

Question

我需要一个右侧有重击的h2.像这样:

我正在努力以最好的,快速响应的方式来实现它.更不用说它是在自定义WP主题中,所以我不想创建大量的页面标记,客户端将立即打破:)

Answer 1

你需要的是一个单独的元素和一个:after伪.PS它的响应.

演示

说明:这里,主要部分是overflow: hidden;在元素上使用,而不是使用:after伪content属性创建虚拟元素,并将其定位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;
}