小编典典

的CSS* * *在文本旁边右对齐

css

我需要一个在其右边具有较大笔触的h2。像这样:

我正在努力以最佳的响应方式来完成它。更不用说它在自定义WP主题中,因此我不想创建大量的页面标记,以使客户端立即中断:)


阅读 299

收藏
2020-05-16

共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;
}
2020-05-16