56

text-decoration: underline で下線の位置を制御する方法はありますか?

<a href="#">Example link</a>

上記の例にはデフォルトで下線があります...テキストと下線の間にスペースを空けるために、その下線を数ピクセル下に微調整する方法はありますか?

4

9 に答える 9

76

2020年

使用してくださいtext-underline-offset！

2012年

これを行う唯一の方法は、下線の代わりに境界線を使用することです。下線は柔軟性がないことで有名です。

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

これがデモです。スペースが足りない場合は簡単に追加できますが、スペースが多すぎる場合は不便です。

于 2012-03-06T15:28:06.973 に答える
22

このように疑似ビフォアとアフターを使用できます。それはうまく機能し、完全にカスタマイズ可能です。

CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>


これは、私が作成したスクリーンショットが添付されたより高度なデモで、 ホバリング時に下線をアニメーション化したり、色を変更したりします...

http://codepen.io/bootstrapped/details/yJqbPa/

cssに下線を引く

于 2016-07-29T20:55:55.410 に答える
15

CSS 3 には提案されたtext-underline-positionプロパティがありますが、まだどのブラウザにも実装されていないようです。

したがって、他の回答で示唆されているように、下線を抑制して下の境界線を追加するという回避策を使用する必要があります。

下線は要素の高さの合計には追加されませんが、下の境界線には追加されることに注意してください。状況によっては、代わりに (全体の高さに加算されない) を使用したい場合がありますoutline-bottom(ただし、 ほど広くサポートされていませんborder-bottom)。

于 2012-03-06T17:10:41.543 に答える
3

下線の代わりにボーダーボトムを使用する

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

padding-bottom を変更してスペースを調整します

于 2012-03-06T15:29:50.100 に答える
0

代わりに境界線を使用します。それをコントロールしやすくなります。

于 2012-03-06T15:28:26.653 に答える