テキストの後ろに緑の背景を動的に追加するにはどうしたらいいでしょうか。ただし、ページ全体の幅ではなく、テキストの部分だけです。
現在のコードでは、緑色の背景がページ全体に広がってしまいます。HTMLやJavascriptを変更することはできず、CSSファイルのみの変更となります。
.
<h1>The Last Will and Testament of Eric Jones</h1>
h1 {
text-align: center;
background-color: green;
}
非常に簡単な方法は、<span>
タグを追加して、その中に背景色を追加することです。そうすれば、思い通りの表示になります。
<h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
そしてCSS
h1 { text-align: center; }
h1 span { background-color: green; }
インライン要素タグの中に<span>
タグを入れることで、効果を装ったコンテンツの上にのみスパンすることができます。
text-alignment centerを削除して、テキストが入っている<h1>
または<div>
を中央に配置してみてください。
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}