我需要一个在其右边具有较大笔触的h2。像这样:
我正在努力以最佳的响应方式来完成它。更不用说它在自定义WP主题中,因此我不想创建大量的页面标记,以使客户端立即中断:)
您需要一个元素和一个:after伪元素。PS它反应灵敏。
:after
说明:在这里,主要部分是overflow: hidden;在元素上使用,然后使用:after带有content属性的伪元素创建虚拟元素,并将其放置在absolute设置为的父元素上。relative
overflow: hidden;
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; }