[ 解決済 ] ハイパーリンクを設定したボタンの下線が消えない

[博之上田]

■ WordPress のバージョン
6.1.1

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
バージョン: 15.5.1

■ Pro Unit のバージョン
バージョン 0.23.4

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
カーソルを当てると文字が少し拡大し、赤い下線が中央から左右に引かれ、タップすると特定のページに遷移するボタンを作成したい。

期待動作は
１）破線が表示されない
２）カーソルを当てても文字の色もリンク色にならない
です。。

■ 自分で試した事
以下のコードを試しました。
text-decoration: none;
を指定しても効果がありませんでした。

html

<p class="vk_custom_css my-parts" style="font-size:13px"><a href="http://sakuragaoka.isekiya-komuten.com/access/" data-type="page" data-id="2474">アクセス</a></p>

CSS

selector {
  position: relative;
  display: inline-block;
  color:#002643;
  font-size:110%;
  text-decoration: none;
}
selector:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background: #ba1c23;
  transform: scale(0, 1);
  transform-origin: center top;
  transition: transform .3s;
}
selector:hover:after {
  transform: scale(1, 1);
}

追加CSSクラス
vk_custom_css

■ 症状が発生するブラウザ
Chrome、Safari

■ 実際の症状
１）文字の下に薄い色の破線が引かれる。（添付１枚目）
２）カーソルを当てると破線が消えて文字が青色に変わる（添付２枚目）

■ その他特記事項
いつもサポートありがとうございます。
本件どうしても改善できず困ってます。よろしくお願いいたします。

Attachments:

You must be logged in to view attached files.

[博之上田]

[対馬 俊彦]

状況が正確にわからないので、たぶんこうだろうと想像して回答しますが…

この場合、selector で指定する CSS は p タグに適用されていると思います。

もしそうだとすると、selector a で a タグに CSS を適用させることができます。

[博之上田]

対馬様
selectorをselector a に修正したら解消しました。
ありがとうございました。

[投稿者]

投稿