前提・実現したいこと
以下の画像のようにテキストの下に下線がありテキストの文字数によって下線の長さを変えたい。
灰色の下線は幅いっぱいに
青の下線はテキストの長さによって変えたい。
条件がありWordPressの記事のため<h2>
タグ以外を入れ子などにして、タグは使いたくないです
h2
タグの改行にも対応したい。
該当のソースコード
html
1<h2>サブタイトルサブタイトルサブタイトル</h2>
borderと記事要素を使ってうまく下線の長さを変えることは可能でしょうか?
h2 { display: inline-block; border-bottom: solid 4px #F7F7F7; border-bottom: solid 4px #003CB0; max-width: 100%; position: relative; } h2::after{ content:""; display:inline-block; width:100%; height:3px; background-color:red; position:absolute; bottom:0; left:0; }
もしできそうな方がいたら教えていただきたいです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。