CSS：下線が下線で表示される

CSSのインライン要素にアンダーラインを追加するにはどうすればよいですか？（1） "スタイラブル"と（2.） - 影）？CSS：下線が下線で表示される

これは反応的なレイアウトであるため、下線は複数の行にまたがる必要があります。また、リンクでインラインになっている可能性のあるテキスト（下線ではありません）を置換することはできません。

これは、望ましい効果を実証するモックアップです。事前に

ありがとう！

出典

2017-10-20 Ood

私はこのを見てみましょう。 –

@DerekBrownコメントありがとう！記事は有望に見えます。 – Ood

、これは私が思いついたのソリューションです。これは、堅実なバックグラウンドでのみ動作します。

background: linear-gradient(white, white), linear-gradient(blue, blue); 
background-position: 0px calc(1em + 5px), 0px 1em; 
background-repeat: repeat-x; 
color: black; 
background-color: white;

出典

2017-10-20 20:02:22 Ood

私はあなたがのborder-bottomを使用することができない理由を知っているが、これを試していない。興味を持って誰のために

<!DOCTYPE html> 
<html> 
    <style> 
    </style> 
    <body> 
     <a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br> 
     <a><span style="border-bottom: blue solid 3px;">LINK OVER 
<br>MULTIPLE</span> LINES</a><br><br> 
     <a><span style="text-decoration: underline; text-decoration-color: 
blue;">LINK OVER<br>MULTIPLE </span> LINES</a> 
    </body> 
</html>

出典

2017-10-20 17:17:03

これは線の太さを変更するものではありません。また、text-decoration-colorはブラウザ間の解決策ではありません。 – Ood

擬似要素を使用して下線をスタイルしたいと思うと思います。私はあまりにも柔軟性を示すために、ホバーで簡単なアニメーションを投げた。 https://css-tricks.com/styling-underlines-web/：

h1 { 
 
    position: relative; 
 
} 
 

 
h1::before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: aqua; 
 
    height: 2px; 
 
    width: 200px; 
 
    transition: width 0.3s; 
 
} 
 

 
h1:hover::before { 
 
    width: 300px; 
 
}

<h1>This is a styleable baseline</h1>

出典

2017-10-20 20:09:46 zsawaf

CSS：下線が下線で表示される

答えて

関連する問題