【CSS】ホバーで矢印が動くようにするCSSコード（WordPress）

当サイトは広告を含んでいます。

2025-05-02

ホバーしたときに矢印がおしゃれに動くようにしたい！

今回は、WordPressでおしゃれなホバーアクションを付けるCSSコードをご紹介します。

ホバーで矢印を動かすCSSコード

ホバーしてみてね！

↑こちらのように、ホバーしたときに矢印を動かすことが出来ると、サイトがよりおしゃれになりますよね！

STEP

段落にリンクを付ける

まずは、矢印を付けたい段落にリンクを付けて下さい。

STEP

CSSクラスを設定

リンクを付けた段落の「高度な設定」より、CSSクラスを設定しましょう。

今回は、「arrow-link」とつけています。

STEP

CSSコードを入力

「外観」→「カスタマイズ」→「追加CSSクラス」よりCSSコードを追加します。

必要に応じて適宜カスタマイズしてください。

そのままコピペOK！

.arrow-link {
  display: flex;
  justify-content: center; /* 中央揃え */
}

.arrow-link a {
  display: inline-block;
  position: relative;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  padding-right: 2em;
}

.arrow-link a::after {
  content: "⇀"; /* 矢印をテキストで追加 */
  font-size: 1.5em; /* 矢印のサイズを大きく */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.arrow-link a:hover::after {
  transform: translate(5px, -50%);
}

STEP