アンダーラインについて - Cocoonテーマに関する質問

RE: アンダーラインについて

りんご — Sat, 16 May 2020 00:30:08 +0000

できました！ありがとうございます！

RE: アンダーラインについて

たなかま — Fri, 15 May 2020 15:42:34 +0000

すごい！　できるんですね。

repeating-linear-gradientを理解できてなかったです。

Akiraさん、ありがとうございます！

RE: アンダーラインについて

Akira — Fri, 15 May 2020 15:00:27 +0000

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

HTML

ああああああ

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;
}

com.png

RE: アンダーラインについて

たなかま — Fri, 15 May 2020 12:38:45 +0000

こんにちは。

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

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

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

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

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

アンダーラインについて

りんご — Fri, 15 May 2020 12:08:47 +0000

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

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↓

60be1dace512d44c72adc0dfb1019cf2.png