うなこさんがお示しくださっているもののうち「Hover時に矢印が動く」の1つ目を少し触ってみました。
こんな感じでしょうか。
(以下のコードを投稿画面に貼り付けてみてください)
<!-- wp:paragraph {"vkbCustomCss":"/* Hover時に矢印が動く */\nselector a {\n position: relative;\n display: inline-block;\n padding-right: 50px;\n text-decoration: none;\n color: currentColor;\n transition: transform 0.2s ease, color 0.2s ease; /* ふわっと移動のアニメーション */\n}\n\nselector a::before {\n width: 100px;\n bottom: 2%;\n right: 3px !important;\n border-bottom: solid 2px currentColor;\n}\n\nselector a::after {\n width: 30px;\n background: currentColor;\n bottom: calc(50% - 3px);\n transform: rotate(45deg);\n}\n\n/* 共通 */\nselector a::before,\nselector a::after {\n content: '';\n position: absolute;\n display: block;\n height: 1.5px;\n right: 0;\n transition: all 0.2s linear;\n}\n\n/* hover時:矢印が右に動く */\nselector a:hover::before {\n right: -10px !important;\n}\nselector a:hover::after {\n right: -14px !important;\n}\n\n/* hover時:テキストがふわっと上に移動 */\nselector a:hover {\n transform: translateY(-3px); /* 3px上に移動 */\n}","className":"vk_custom_css","style":{"typography":{"fontSize":"1.25rem"}},"textColor":"black"} -->
<p class="vk_custom_css has-black-color has-text-color" style="font-size:1.25rem"><a href="#">View More</a></p>
<!-- /wp:paragraph -->
※ 私の環境で作業しました故、お使いの環境や既に施されているカスタマイズ等によって修正が必要になる可能性がございます。
Attachments:
You must be
logged in to view attached files.