5

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

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

4

2 回答 2

13

您需要的是单个元素和: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;
}
于 2013-10-25T06:28:01.827 回答
4

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

工作演示

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

于 2013-10-25T06:12:59.060 回答