マーカー線を引く方法
HTML / CSSで、マーカー線を引く方法と、自分が気に入っているマーカーのパターン、最後には、カーソルを合わせた時にマーカーが引かれるようにする方法について書きます。
パターン1
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>これは、重要です。</h1>
</body>
</html>
CSS
h1 {
font-size: 40px;
width: 360px;
background:
linear-gradient(transparent 0%, #ffadad 0%);
}
background: linear-gradient(transparent 割合, カラーコード 割合);でマーカーを指定します。
割合の大きさの意味については、パターン2で解説しました。
パターン 2
CSS
background:
linear-gradient(transparent 75%, #ffadad 0%);
transparentの割合が高いほど、マーカー線の高さが低くなります。
100%にすると、マーカー線が無くなります。
一方、カラーコードの割合を100%にすると、
background:
linear-gradient(transparent 75%, #ffadad 100%);
このように、インク切れのマーカー線みたいになります。
0%とすることで、しっかりと色が付くようになっています。
パターン3
CSS
background:
linear-gradient(transparent 75%, #7fbfff 0%);
文字と色を変えてみました。
青いマーカー線は、肯定的なメッセージを強調したい時に使えそうです。
パターン4
CSS
background:
linear-gradient(transparent 75%, #7fff7f 0%);
「安心の緑」という感じです。
hover時にマーカーが引かれるようにする
CSS
h1 {
position: relative;
display: inline-block;
cursor: pointer;
}
h1::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 40px;
background: linear-gradient(transparent 75%, #7fff7f 0%);
transform: scale(0, 1);
transform-origin: left top;
transition: transform .9s;
}
h1:hover::after {
transform: scale(1, 1);
}
量が多いので、一つずつ見ていきます。
h1 {
position: relative;
display: inline-block;
cursor: pointer;
}
「安心してください」という文字を、position: relative;で位置の基準にしています。
マーカーを文字の幅に合わせるために、display: inline-block;を使っています。
カーソルを当てた時に、指のマークにするために、cursor: pointer;を指定しています。
h1::after {
position: absolute;
bottom: -4px;
left: 0;
content: '';
width: 100%;
height: 40px;
background: linear-gradient(transparent 75%, #7fff7f 0%);
transform: scale(0, 1);
transform-origin: left top;
transition: transform .9s;
}
h1の後に持ってくる要素を指定しています。
これも一つずつ見ていきます。
position: absolute;
bottom: -4px;
left: 0;
文字を基準として、一番左、下から4pxに位置しています。
content: '';
width: 100%;
height: 40px;
マーカーのみを表示させたいため、content: '';によって文字は空にしています。
マーカーが表示された時の幅は、文字の幅、高さは40pxです。
background: linear-gradient(transparent 75%, #7fff7f 0%);
マーカーは、パターン4と同じ「安心の緑」です。
transform: scale(0, 1);
transform-origin: left top;
変化前の左と上からの位置を指定しています。
transition: transform .9s;
変化するスピードを指定しています。.1よりも.9の方が遅いです。
h1:hover::after {
transform: scale(1, 1);
}
カーソルを合わせた時に、左端から右端に移動するという意味です。
参考にしたサイト
カゲサイ(https://kagesai.net/css-marker-design/#kagesai-2)
NxWorld(https://www.nxworld.net/tips/css-hover-underline-animation-examples-and-sass-mixin.html)
