html - CSSテキストの横に右揃え

Question

右側に重いストロークがある h2 が必要です。そのようです：

私はそれを達成するための最良の応答性の高い方法に苦労しています。カスタム WP テーマであることは言うまでもありません。そのため、クライアントがすぐに壊れる大量のオンページ マークアップを作成したくありません :)

Answer 1

ここでは、完全にレスポンシブなソリューションを使用します。

ワーキングデモ

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: ニーズやメディア クエリの要件に合わせて、それに応じてマージン/パディングを変更できます。