Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

1つのトピックにつき1つの質問を書き込んでください
不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください
該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL：

相談内容：

不具合の発生手順：

解決のために試したこと：

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

共有:

通知

すべてクリア

[解決済] アンダーラインについて

Cocoonテーマに関する質問

最新の投稿 : 匿名 5年前

5 投稿

3 ユーザー

6 Reactions

2,132 表示

未解決

RSS

りんご

(@りんご)

Active Member

結合: 5年前

投稿: 10

Topic starter 2020年5月15日 21:08

こんばんは、ご愛用させていただいています。

cocoonテーマとは少し関係ないかもしれませんが、もともと実装されている下線のCSSが少なかったので、追加で下線のコードを作成してみました。

しかし、このコードに限らず、どんなコードの種類を書いても写真のように文章全部に下線がかかりません。以下のコードで直すべき点を教えていただきたく思います。

コードについては、

CSS↓

.under {

position: relative;

padding: .1em;

}

.under:after {

content: "";

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 4px;

background: repeating-linear-gradient(-45deg, #506185, #506185 2px, #fff 2px, #fff 4px);

display: inline;

}

HTML↓

</span>

たなかま

(@tanakama)

Prominent Member Registered

結合: 7年前

投稿: 600

2020年5月15日 21:38

こんにちは。

どんなコードの種類を書いても写真のように文章全部に下線がかかりません。

たしかストライプ系のアンダーラインって、改行や行送りがあると、下にしかつかなかったような・・・。

参考にされた記事ですが、そのコードだと、もともと見出しとかのカスタマイズ例ではないでしょうか？

僕も試そうとして上手く行かなかったのを覚えています。

実現できる方法を知っている方がいらっしゃったら、お願いします。

わいひら reacted

Akira

(@akira)

Famed Member Registered

結合: 7年前

投稿: 1657

2020年5月16日 00:00

こんなやつはどうでしょう？

HTML

<p><span class="under">ああああああ</span></p>

CSS

.under {
  border-image: repeating-linear-gradient(-50deg, #506185, #506185 2px, transparent 0, transparent 4px) 10/0 0 5px 0;
  border-style: solid;
  padding-bottom: 2px;
}