タイトルの文字を部分的に変更
アニメーションを付与しているタイトルのおすすめ
のみ色変更
index.html
<divclass="popular__header"><h2class="main-title tween-animate-title">おすすめ作品
</h2><pclass="sub-title tween-animate-title">愛読歴20年の独断と偏見(TOP5)
</p></div>
_base.scss
.popular{margin-bottom:80px!important;.main-title{.char:nth-child(1){color:aqua;}.char:nth-child(2){color:aqua;}.char:nth-child(3){color:aqua;}.char:nth-child(4){color:aqua;}}
nth-childを使用し、文字を指定し変更できた。
アニメーションがあるタイトルには、spanタグでおすすめ
を囲うやり方をしてもうまくいかなかった。
<h2><span>おすすめ</span>作品</h2>