擬似要素
pseudo_element
2020/04/28
ホバーした時に文字が増えたり減ったりするやつ(語彙力)(伝われ)をつくる
こんにちは、中の人です。 今回は、ホバーした時に文字列が変化するやつ(?)伸び縮みするやつ(?)の実装例をご紹介します。 AWWWARDSさんのサイトを見ていた時にヘッダーのロゴが面白い動きをしていたので、忘れないうちに備忘録を残したいと思いました。 ちなみに、こんな感じで動くやつです。 早速ですが、実装例になります。 下準備 まずはhover前のテキストを作っていきます。 「l」を擬似要素で表示するために「CodePoooooooo」と「l」に分けています。 「CodePoooooooo」に固定値widthを指定して文字が増える部分を"overflow: hidde;"で隠しています。 また、「CodePool」という文字列を定義するためにaria-label属性を使用します。 ■HTML CodePoooooooo ■CSS .header-logo { overflow: hidden; position: relative; transition: all .5s ease; width: 120px; } .header-logo a { display: block; overflow: hidden; transition: all .5s ease; width: 114px; } .header-logo a:after { content: 'l'; position: absolute; top: 0; right: 0; width: 6px; } CodePoooooooo hoverした時の動きを加える 擬似要素で表示している「l」を右に移動させると同時に「CodePoooooooo」のwidthを変化させて隠れていた文字を表示させます。 ■HTML CodePoooooooo ■CSS .header-logo { overflow: hidden; position: relative; transition: all .5s ease; width: 120px; } .header-logo:hover { width: 215px; } .header-logo a { display: block; overflow: hidden; transition: all .5s ease; width: 114px; } .header-logo:hover a { width: 210px; } .header-logo a:after { content: 'l'; display: block; position: absolute; top: 0; right: 0; width: 6px; } CodePoooooooo
2020/04/19
テキストリンクの下線を擬似要素を用いて表示させる方法
こんにちは、中の人です。初めての記事投稿になります。 今回は、CSSの擬似要素を用いてテキストリンクに下線を表示させる方法をご紹介します。 擬似要素を上手く活用することでデザインの幅がグッと広がります。 早速ですが、例としてこのような実装方法があります。 シンプルな下線の例 直線 ■HTML テキストリンク ■CSS .example-1 { line-height: 2.5em; position: relative; } .example-1:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; } テキストリンク 点線 ■HTML テキストリンク ■CSS .example-2 { line-height: 2.5em; position: relative; } .example-2:after { border-bottom: 1px dotted rgba(0, 0, 0, .5); content: ''; position: absolute; bottom: 0; left: 0; width: 100%; } テキストリンク 解説 その1の例では擬似要素に対してheightで線幅、widthで線の長さを指定していました。 この場合、CSSでアニメーションを指定しやすいということがメリットになります。 その2の例ではborder-bottomを指定して擬似要素そのものに下線を付ける実装をしています。 アニメーションを指定しない要素の場合はborderプロパティで指定した方がスマートに書けますね。 また、border-bottomに'dotted'を指定して点線を表示していますが、'dashed'や'double'を指定することで線のスタイルを変更することもできます。 今回は2種類の実装方法をご紹介しました。用途や場面に応じて色々と使い分けができそうですね。
