web-dev-qa-db-ja.com

テキスト装飾の下線の位置を制御：下線

テキスト装飾の下線の位置を制御する方法はありますか：下線？

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

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

cssunderline
42
redconservatory

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

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

ここにデモがあります。 十分なスペースがない場合は、簡単に追加できます。大きすぎる場合は、少し不便です。

52
Ry-

このように前後に擬似を使用できます。うまく機能し、完全にカスタマイズ可能です。

[〜＃〜] 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/

underline css

16
Bryan Willis

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

そのため、他の回答で提案されているように、下線を非表示にして下罫線を追加する回避策を使用する必要があります。

下線は要素の合計の高さに追加されませんが、下の境界線は追加されることに注意してください。状況によっては、outline-bottom –これは全体の高さに追加されません–代わりに（ただし、border-bottom）。

14
Jukka K. Korpela

border-bottom-widthおよびborder-bottom-styleを使用すると、デフォルトで境界線がテキストと同じ色になります。

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;
2
Dorian

1つのプロパティtext-underline-position: underがあります。ただし、ChromeおよびIE 10+。

詳細： https://css-tricks.com/almanac/properties/t/text-underline-position/https://developer.mozilla.org/en-US/ docs/Web/CSS/text-underline-position

2
Jinu Kurian

下線の代わりに境界線を使用する

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

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

2
Julien

代わりにボーダーを使用します。それを簡単に制御できます。

0
mikevoermans