おしゃれな見出しを調べてみると、ものすごく大量に例が出てきて、どれもやってみたくなりますが、それだとwebサイトが見出しだらけになってしまうので、もっとも適したものを探して選ぶのが、楽しくて大変です。
javascript を使って動きをつけても面白いのですが、個人的には凝ったものよりシンプルで洗練されたものが好きなので、なるべくcssだけでできている、スマートなものを選ぶようにしています。決して javascript がわからないわけではないです。本当に。本当。
アンダーラインをつけたい見出しが「read more」という一言なので、こちらにまだまだ情報がありますよ！ってニュアンスにするために、矢印付きのアンダーラインにすることに決めました。
こちらのwebサイトを参考にしました。
線先に矢印、って項目ですね。丸コピペするとこんな感じ。
See the Pen WNbXRaM by ishi (@ishi-nagoya) on CodePen.
こっち見て！みたいなアピールが素敵ですね。これをアレンジして使います。
まず、アンダーラインをつけたい「read more」は、ブロックの右側にあるので、矢印の向きを右向きに変更します。h1:before で矢印の先端、h1:after で矢印の棒部分を構成しているので、h1:before の位置を右にします。
h1:before の中の border-left: を border-right: に変更すると、矢印の先端が右にきます。それから、left: を right: に変更して、 好みの位置になるように調整。私は「read more」の後ろあたりにくるようにしたかったので、 -20px にしました。
あとは h1:after の中の left: 10px; を、必要ないので 0 に変更。変更したら、矢印の棒が寸足らずになったので、どうしたもんかと考えた結果、 width を 103% にしたら、見た目はうまくいきました。すごく力業な気はしますが、ひとまずよし。
最後に色を決めたら完成。つくづく、CSSってすごい。発想次第でなんでもできると思う。
矢印の先端がどうやってできているかの詳しい解説がありました。わかりやすい。最初に考えた人、すごい。コロンブスの卵ですね。先端だけに。CSSの世界には、いったいいくつの卵がさかさまに立っているのだろう。
かしこ
