WordPressでテキストリンクをおしゃれに装飾する方法｜ブロックエディタ＆CSSで簡単カスタマイズ

<p class="arrowbtn"><a href="#">テキストリンク</a></p>

/* 矢印---------------------------------------------- */

.arrowbtn a {
   --arrow-color:#333; /* 矢印の色を設定 */
   position: relative; /* 疑似要素を位置指定するための基準 */
   padding: 0 2.5em .5em .5em; /* 内側の余白（右に矢印部分を空ける） */
   color: var(--arrow-color); /* 文字色を矢印の色と統一 */
   text-decoration: none; /* 下線を非表示 */
}

.arrowbtn a::before {
   border-bottom: 1px solid var(--arrow-color); /* 下線としての矢印部分 */
   border-right: 1px solid var(--arrow-color); /* 右線としての矢印部分 */
   bottom: 0; /* 矢印をボタン下部に配置 */
   content: ''; /* 疑似要素でコンテンツを空に設定 */
   height: 12px; /* 矢印の高さ */
   position: absolute; /* 親要素から相対的に配置 */
   left: 0; /* 矢印の位置を左端に */
   transform: skewX(50deg); /* 矢印の形状を傾けてデザイン */
   width: 100%; /* ボタン全体の幅に矢印を合わせる */
   transition: all .3s; /* なめらかな動き（ホバー時） */
}

/* マウスオーバー時の動き */
.arrowbtn a:hover::before {
   left: 10%; /* ホバー時、矢印が右に10%ずれる */
}

<p class="arrowbtn-2"><a href="#">テキストリンク</a></p>

/* 矢印-2---------------------------------------------- */
.arrowbtn-2 a {
   --arrow-color: #333; /* 矢印の色を設定 */
   display: inline-flex; /* 横並びに配置 */
   align-items: center; /* 垂直方向を中央に揃える */
   color: var(--arrow-color); /* 文字色を矢印の色と一致 */
   text-decoration: none; /* 下線を非表示 */
   position: relative; /* 疑似要素の位置基準 */
}

.arrowbtn-2 a::after {
   border-bottom: 1px solid var(--arrow-color); /* 下線のスタイルを矢印として設定 */
   border-right: 1px solid var(--arrow-color); /* 右線のスタイルを矢印として設定 */
   content: ''; /* 疑似要素のコンテンツを空に設定 */
   width: 30px; /* 矢印の幅を30pxに設定 */
   height: 10px; /* 矢印の高さを10pxに設定 */
   position: absolute; /* 親要素に対して絶対位置 */
   left: 100%; /* テキストの右端に配置 */
   transform: skewX(50deg); /* 矢印の傾きの調整 */
   transition: all .3s; /* なめらかな移動効果 */
}

/* マウスオーバー時の動き */
.arrowbtn-2 a:hover::after {
   margin-left: 10px; /* マウスオーバー時に矢印を10px右に移動 */
}

<p class="arrowbtn-3"><a href="#">テキストリンク</a></p>

/* 矢印（右に移動して背景がつく） */
.arrowbtn-3 a {
   --arrow-color: #555; /* 矢印と枠線の色 */
   position: relative; /* 疑似要素の基準 */
   border: 1px solid var(--arrow-color); /* ボタンの枠線 */
   color: var(--arrow-color); /* 文字色を矢印色に */
   text-decoration: none; /* 下線を非表示 */
   padding: 8px 30px; /* 内側の余白 */
   display: inline-block; /* インラインブロックで中央揃え */
   text-align: center; /* テキストを中央揃え */
   transition: all .2s linear; /* 背景色と文字色の変化をなめらかに */
}

.arrowbtn-3 a:hover {
   background: #999; /* ホバー時の背景色 */
   color: #fff; /* ホバー時の文字色 */
}

.arrowbtn-3 a::before {
   border-bottom: 1px solid var(--arrow-color); /* 矢印の下線 */
   border-right: 1px solid var(--arrow-color); /* 矢印の右線 */
   content: ''; /* 疑似要素のコンテンツを空に設定 */
   height: 10px; /* 矢印の高さ */
   position: absolute; /* 親要素に対する位置指定 */
   top: calc(50% - 10px); /* ボタンの中央に配置 */
   right: -20px; /* ボタンの右端から20px外に配置 */
   transform: skewX(50deg); /* 矢印の傾き */
   width: 40px; /* 矢印の幅 */
   transition: all .3s; /* 矢印の移動をなめらかに */
}

/* hoverした際の移動 */
.arrowbtn-3 a:hover::before {
   right: -25px; /* ホバー時、矢印を右に5px移動 */
}

<p class="arrowbtn-4"><a href="#">テキストリンク</a></p>

/* ボタン（矢印付き）--------------------------------- */

/* ボタンのスタイル */
.arrowbtn-4 a {
   --arrow-color: #333; /* 矢印の色 */
   display: inline-block; /* インラインブロック要素にする */
   border: 1px solid #b5b5ae; /* ボタンの枠線の設定（太さ、種類、色） */
   color: var(--arrow-color); /* 文字色を矢印の色と合わせる */
   padding: 10px 50px 10px 20px; /* 内側の余白（上・右・下・左） */
   text-decoration: none; /* 下線を非表示 */
   border-radius: 99px; /* ボタンを丸みのある角に */
   transition: .3s all; /* 変化をゆっくりにする */
   position: relative; /* 疑似要素の位置基準 */
}

/* 矢印のスタイル */
.arrowbtn-4 a:after {
   content: ''; /* 疑似要素で矢印を描写 */
   border-bottom: 1px solid var(--arrow-color); /* 矢印の下線の設定 */
   border-right: 1px solid var(--arrow-color); /* 矢印の右線の設定 */
   width: 15px; /* 矢印の幅 */
   height: 3px; /* 矢印の高さ */
   transform: skewX(45deg); /* 矢印の角度 */
   position: absolute; /* 親要素からの位置指定 */
   right: 20px; /* ボタンの右からの距離 */
   bottom: 50%; /* ボタンの中央位置に配置 */
   transition: .3s all; /* 変化をスムーズに */
}

/* マウスオーバー時の変化 */
.arrowbtn-4 a:hover {
   --link-btn-color: #b5b5ae; /* ホバー時のボタン色 */
   background-color: var(--link-btn-color); /* 背景色を変更 */
   border-color: var(--link-btn-color); /* 枠線色を変更 */
   color: #fff; /* 文字色を白に */
}

.arrowbtn-4 a:hover:after {
   border-color: #fff; /* ホバー時に矢印の色を白に変更 */
   right: 15px; /* 矢印の位置を左へ少し移動 */
}

<p class="arrowbtn-5"><a href="#">テキストリンク</a></p>

/* ボタン（矢印付き）--------------------------------- */

/* ボタンのスタイル */
.arrowbtn-5 a {
   --arrow-color: #333; /* 矢印の色 */
   display: inline-block; /* インラインブロック要素にする */
   border: 1px solid #b5b5ae; /* ボタンの枠線の設定（太さ、種類、色） */
   color: var(--arrow-color); /* 文字色を矢印の色と合わせる */
   padding: 10px 50px 10px 20px; /* 内側の余白（上・右・下・左） */
   text-decoration: none; /* 下線を非表示 */
   transition: .3s all; /* 変化をゆっくりにする */
   position: relative; /* 疑似要素の位置基準 */
}

/* 矢印のスタイル */
.arrowbtn-5 a:after {
   content: ''; /* 疑似要素で矢印を描写 */
   border-bottom: 1px solid var(--arrow-color); /* 矢印の下線の設定 */
   border-right: 1px solid var(--arrow-color); /* 矢印の右線の設定 */
   width: 15px; /* 矢印の幅 */
   height: 3px; /* 矢印の高さ */
   transform: skewX(45deg); /* 矢印の角度 */
   position: absolute; /* 親要素からの位置指定 */
   right: 20px; /* ボタンの右からの距離 */
   bottom: 50%; /* ボタンの中央位置に配置 */
   transition: .3s all; /* 変化をスムーズに */
}

/* マウスオーバー時の変化 */
.arrowbtn-5 a:hover {
   --link-btn-color: #b5b5ae; /* ホバー時のボタン色 */
   background-color: var(--link-btn-color); /* 背景色を変更 */
   border-color: var(--link-btn-color); /* 枠線色を変更 */
   color: #fff; /* 文字色を白に */
}

.arrowbtn-5 a:hover:after {
   border-color: #fff; /* ホバー時に矢印の色を白に変更 */
   right: 15px; /* 矢印の位置を左へ少し移動 */
}

<p class="move-line"><a href="#">中央から左右に下線</a></p>

/* 中央から下線 */
.move-line a {
   text-decoration: none; /* リンクの下線を消す */
   position: relative; /* 擬似要素の基準位置を設定 */
   color: #333; /* リンクテキストの色 */
   padding-bottom: 10px; /* リンクテキスト下部の余白 */
}

.move-line a::before {
   content: ""; /* 擬似要素の内容は空に設定 */
   position: absolute; /* リンクを基準に絶対位置を指定 */
   left: 50%; /* 下線を中央から表示するための開始位置 */
   bottom: 0; /* リンクテキストの下に下線を配置 */
   width: 0; /* 初期の下線幅を0に設定 */
   height: 2px; /* 下線の太さ */
   background-color: #333; /* 下線の色 */
   transition: all 0.4s ease; /* ホバー時の下線アニメーション効果 */
}

.move-line a:hover::before {
   width: 100%; /* ホバー時に下線が全体に広がるよう設定 */
   left: 0; /* 下線の開始位置を左端に設定 */
}