CSS <hr />右侧对齐文本

Question

我需要一个右侧有重击的h2。像这样：

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

Answer 1

您需要的是单个元素和:after伪。 P.S它很敏感。

Demo

说明：这里，主要部分是在元素上使用overflow: hidden;，而不是使用带有:after属性的content伪创建虚拟元素，并定位它{ {1}}设置为absolute

的父元素

relative

Answer 2

在这里，您可以使用完全响应的解决方案。

<强> WORKING DEMO

HTML：

<h2 class="title">Who we are</h2>
<div class="red">&nbsp;</div>

CSS：

.red{
background:#ff0000;
position:relative;
margin-top:-17px;
height:5px;
z-index:-1;
}

.title{
background:#ffffff;
display:inline;
padding-right:20px;
}

希望这有帮助。

PS：您可以根据需要和媒体查询要求更改边距/填充。