Html CSS<；人力资源>；文本旁边右对齐

我需要一个在右边有一个大冲程的h2。像这样：

---

我正在努力用最好的、反应迅速的方式来完成它。更不用说它是在一个定制的WP主题中，所以我不想创建大量的页面标记，客户端会立即破坏这些标记：）

这里是一个完全响应的解决方案

HTML:

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

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

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

希望这有帮助

---

PS：您可以相应地更改边距/填充，以符合您的需要以及媒体查询要求。

您需要的是单个元素和伪元素。另外，它反应灵敏

说明：这里，主要部分是使用

overflow:hidden，然后使用
：after
pseudo with
content
属性创建虚拟元素，并将其定位到设置为
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;
}

你好，世界
氢{
字体大小：20px；
字体系列：Arial；
位置：相对位置；
溢出：隐藏；
}
h2：之后{
显示：内联块；
内容：“；
高度：4px；
背景：#f00；
位置：绝对位置；
宽度：100%；
最高：50%；
页边顶部：-2px；
左边距：10px；
}
为什么不尝试使用div with（height:2px；widt:70%；background:red；float:left；）@techfoobar？我确信他将使用媒体查询使其内容具有响应性，因此在这种情况下，无论分辨率发生什么变化，他都需要根据媒体查询更改类属性以使其具有响应性。我希望这一点是正确的。是的，在对分辨率进行微调时，仍然对这些值使用ems将减少大量工作。同意，但
ems
将与继承元素的
%
值成比例，因此使用具有精确分辨率参数的媒体查询，px和ems中的值将略有变化。我同意在流体布局的情况下使用ems，但作为响应，用户生成的分辨率控制应取决于OP如何执行。输入的Thx-@techfoobarSo，因为标题是display:inline，它会把div拉到线上吗？这是否需要一个明确的：都后，以防止wierdness？1<代码>显示：内联不会创建任何wierdness。2. <代码>清除：两者都有要清除什么？？-@布拉德马格纳斯真是太棒了+1.不确定OP是否会喜欢使用
：after
这是我考虑添加的答案（尽管布局属性不同），所以+1。非常酷！谢谢你花时间给我一个很好的解释！我看到的唯一潜在问题是较旧的浏览器支持。这是一个真正的问题，我想我上次检查伪类不支持IE8或更老版本？@bradmagnus
：在
支持IE8之后，它是

：：在之后，这是IE9支持的：）您也欢迎，开始支持IE9及以上版本的东西，否则，你只会膨胀你的标记以及CSS，以便为IE编写支持性的样式well@Mr.Alien谢谢你的澄清！我不知道我是否会支持IE8或更早版本，但我只是想在与客户交谈时意识到这一点哈哈！我很早就开始使用：first child，但也需要在VM上检查它。