2017-06-08 16 views
0

私は自分のウェブサイトのすべてのCATにborder-bottomを使用しています。それが1つまたは2つの単語のときに素晴らしい。文章以上のCTAにそれを適用しようとすると、単語はモバイルで壊れ、境界線の下端は文の最後の行にのみ影響します。 border-bottomをテキストの行に適用するにはどうすればよいですか?私は、ホバー上の遷移のために下線を使いたくないし、下線は私が望む1ピクセルの境界線を与えないという事実。複数のテキスト行に境界ボトムを適用するにはどうすればよいですか?

here

答えて

1

これは私のために働くようだ、デスクトップ、モバイル、タブのイメージを見ます!遷移が擬似要素に適用することができる::それがテキストに下線ない後の前または::

.underline { 
 
    border-bottom: 1px solid black; 
 
}
<span class="underline">Read more on research, empathy and personas on Medium</span>

0

。すべての単語のための

div 
 
{ 
 
text-decoration:underline; 
 
}
<div> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an</div>

下線 が...これは

+0

おかげで、チャンドラが、これは私が欲しいものではありません。私が話しているborder-bottomは実際には ":: before"要素にあります。私は2つの理由からそれをしました。行が100%幅から0に変換されることを意味します。そして第二に、私は自分のブランドアイデンティティの一部である1pxラインを望んでいました。下線は2ピクセル境界のように見えます。 –

0

はこれを試してみてください作品を願っています!

div 
 
{ 
 
display:inline; 
 
border-bottom: solid 1px #000 
 
}
<div> 
 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
 
</div>

関連する問題