【CSS】マーカー風のテキストリンクを作る

2024年3月8日

今回は、テキストをマーカー風に線を引く方法と、マウスオーバーでマーカー線を引くようなリンクも作ってみます。

おまけで、マウスオーバーで線を波のように動かすリンクもご紹介します。

◆まずはデモページをご覧ください。

デモページを見る

線を引く方法は、下記のように単純に「background」で表現できます。
テキスト全体ではなく、下半分に線を引く場合は、同じ「background」で「linear-gradient」を使ってどこまで線を引くのか指定できます。

HTML

<p class="marker_text1">マーカー風テキスト</p>
<p class="marker_text2">マーカー風テキスト</p>

CSS

.marker_text1 {
background: #ffe759;
}
.marker_text2 {
background: linear-gradient(transparent 60%, #ffe759 40%);
}

次に、マウスオーバーで線を引いてみます。
改行しても、テキスト全体に線を引く事ができます。

HTML

<p><a href="#" class="marker_link">マーカー風テキストリンク</a></p>
<p><a href="#" class="marker_link">マーカー風テキストリンク<br>改行が入ってもマーカーが表示されます</a></p>

CSS

.marker_link {
padding-bottom: 0.2rem;
background: linear-gradient(to right, #ffe759 50%, transparent 50%) 100% bottom / 200% 50% no-repeat;
transition: background-position 0.5s ease-out;
}
.marker_link:hover {
background-position: 0% bottom;
}

最後に、マウスオーバーで線を波のように動かすリンクを作ってみます。

HTML

CSS

.list_link {
display: flex;
flex-flow: row nowrap;
gap: 50px;
font-size: 1.2rem;
margin-top: 30px;
}
.wave {
display: flex;
position: relative;
overflow: hidden;
padding-bottom: 10px;
}
.wave_item {
position: absolute;
fill: none;
stroke: #333;
top: -3px;
stroke-width: 2px;
transition: transform 0.7s;
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.wave:hover .wave_item {
transform: translate3d(-66.6%, 0, 0);
}

マーカー線のリンクは、文章内でリンクを設置する際に使えそうですね。

【CSS】マーカー風のテキストリンクを作る

関連する記事