Ryo Blog
〜WEB制作をスキルに〜
こんなことを説明しています！
- 擬似要素を使って文字の下にだけ下線を引く方法
- 真ん中から下線を両サイドへ広げる方法
- スニペットの紹介
解説動画
コードの解説
HTMLの記述
<h2 class="title"><span>テキスト</span></h2>ポイント
テキストの下のみに下線を引きたい
▶︎ h2はブロック要素なので、擬似要素で100%の下線を引くと幅全体に下線が引かれてしまう
▶︎ titleをインライン要素の<span>タグで囲ってそれに擬似要素を当てるように作る
CSSの記述
.title span {
position: relative;
&::before {
content: '';
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: #000;
transition: all 0.3s ease;
}
&:hover::before {
width: 100%;
}
}
手順① 線の幅 ( width ) の指定
▶︎ ホバーする前の擬似要素の幅をゼロにする
▶︎ ホバーしたら幅が100%になるように
手順② 幅を広げる位置
▶︎ 中央揃え [ left: 50%, transform: translateY(-50%); ] として
▶︎ ホバーしたらそこから両サイドに伸びるように指定
手順③ Hover アクション時までの動きをつける
▶︎ [ transition ] を使用
解説で使用したスニペット
scss.json
"before-line": {
"prefix": "before-line",
"body": [
"&::before {",
" content: '';",
" position: absolute;",
" width: 100%;",
" height: 1px;",
" background: $1;",
" //配置",
" $2",
"}",
],
"description": "擬似要素で下線を引く"
},
"top50": {
"prefix": "top-50%",
"body": [
"top: 50%;",
"transform: translateY(-50%);",
],
"description": "縦中央揃え"
},
"left50": {
"prefix": "left-50%",
"body": [
"left: 50%;",
"transform: translateX(-50%);",
],
"description": "横中央揃え"
},
"hover": {
"prefix": "hover",
"body": [
"&:hover {",
" $1",
"}",
],
"description": "hoverアクションの際に使用できる"
},Category
Tag
X
Youtube
私がWEB制作フリーランスとして独立するために学習したオンラインスクール「デイトラ」の詳細リンクはこちら↓↓
Products
Coming Soon
HP制作のご依頼
現在エンドクライアント様向けの事業サイトを作成中です。
WEB制作業務委託
のご依頼
LPコーディング、WordPress構築、Shopify構築、Liquid編集業務承ります！ 約1年間で80サイト以上作成をしてきました。LP制作 最短2日で納品！
詳しくは、ポートフォリオをご覧ください。
コンテンツ
Ryo'Portfolio裏側徹底解説、レスポンシブほぼ不要のコーディング方法、実務必須のやや難しい実装解説、見積もりからコーディング、納品までの最初から最後まで全部見せます解説動画、等々 「学習終わったけど実務が不安」という人に向けた「実務のお守り」のようなコンテンツを現在作成中です。
© Ryo Blog