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

Posted 2023-03-05

【中文标题】CSS <hr> 在文本旁边右对齐

【英文标题】：CSS <hr> right aligned next to text

【发布时间】：2013-11-04 02:56:57

【问题描述】：

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

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

【问题讨论】：

你为什么不尝试使用 div with (height:2px; widht: 70%; background: red; float:left;)

【参考方案1】：

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

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：您可以相应地更改边距/填充以匹配您的需求以及媒体查询要求。

【讨论】：

@techfoobar - 我相信他会使用媒体查询来使他的东西响应，所以在这种情况下，无论发生什么分辨率变化，他都需要根据媒体查询更改类属性做出响应。我希望这一点是合理的。

是的，在跨分辨率微调时，仍然对这些值使用 em 会减少大量工作。

同意，但是ems 将与继承元素的% 值成正比，因此使用具有精确分辨率参数的媒体查询，px 和 em 中的值将略有变化。我同意在流体布局的情况下使用 ems，但在响应中，用户生成的分辨率控制应取决于 OP 如何执行它。感谢输入 - @techfoobar

所以因为标题是 display:inline 它把 div 拉上去就行了？这是否需要 clear:both after 以防止奇怪？

1. display:inline; 不会产生任何怪异。 2.clear:both;清除什么？？ - @bradmagnus

【参考方案2】：

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

Demo

解释：这里，主要部分是在元素上使用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;

【讨论】：

真的很棒。 +1。不确定 OP 是否会喜欢使用:after

这是关于我正在考虑添加作为答案的内容（尽管具有不同的布局属性），所以 +1。

非常酷！也感谢您花时间给出一个很好的解释！我看到的唯一潜在问题是旧版浏览器支持。这是一个真正的问题，我想我上次检查了伪类不支持 IE8 或更早版本？

@bradmagnus :after 确实支持 IE8，它是 IE9 支持的 ::after :) 并且欢迎您从 IE9 及更高版本开始支持您的东西，否则您只会膨胀为 IE 编写支持样式的标记和 CSS

@Mr.Alien 感谢您的澄清！我不知道我是否会对IE8或更早版本做任何支持，但我只是想在与客户交谈时注意它哈哈！我开始使用 :first-child 较早，但也需要在 VM 上检查。