css - CSS でテキストと下線の間のギャップを増やす方法

Question

CSSを使用して、テキストがtext-decoration:underline適用されている場合、テキストと下線の間の距離を広げることは可能ですか?

Answer 1

border-bottom: 1px solid #000いいえ、しかし、あなたはのようなもので行くことができますpadding-bottom: 3px.

「下線」（私の例では境界線）と同じ色が必要な場合は、色の宣言、つまりborder-bottom-width: 1pxand border-bottom-style: solid.

複数行の場合、要素内のスパンで複数行のテキストをラップできます。たとえば、- Demoにandを<a href="#"><span>insert multiline texts here</span></a>追加するだけですborder-bottompadding<span>

Answer 2

更新 2021: text-underline-offsetほとんどすべての主要な最新バージョンのブラウザーで動作するようになりました (IE11 は使用できません): https://caniuse.com/?search=text-underline-offset

2019 年の更新: CSS ワーキング グループは、下線の正確な配置を制御できるようにする新しいプロパティ(および) を追加する、テキスト装飾レベル 4のドラフトを公開しました。これを書いている時点では、これは初期段階のドラフトであり、どのブラウザーにも実装されていませんが、最終的には以下の手法が時代遅れになるようです.text-underline-offsettext-decoration-thickness

以下の元の回答。

---

border-bottom直接使用する場合の問題は、 を使用しても、下線がテキストから離れpadding-bottom: 0すぎて見栄えがよくない傾向があることです。そのため、まだ完全なコントロールはできていません。

ピクセル精度を実現する 1 つの解決策は、:after疑似要素を使用することです。

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: '';

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

プロパティを変更するとbottom(負の数でも問題ありません)、下線を必要な場所に正確に配置できます。

注意すべきこの手法の問題点の 1 つは、行の折り返しで少し奇妙な動作をすることです。

Answer 3

これを使用できますtext-underline-position: under

詳細については、こちらをご覧ください: https://css-tricks.com/almanac/properties/t/text-underline-position/

ブラウザの互換性も参照してください。

Answer 4

の視覚スタイルの詳細に入ることはtext-decoration:underlineほとんど無駄なので、魔法のように遠く離れた将来のバージョンの CSS がより多くの制御を提供するまで、何らかのハックを行って削除text-decoration:underlineし、それを別のものに置き換える必要があります。 .

これは私のために働いた：

   a {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) 81%, 
        #222222 81.1%,
        #222222 85%,
        rgba(0,0,0,0) 85.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>

• % 値 (81% と 85%) を調整して、線がテキストからどれだけ離れているかを変更します
• 2 つの % 値の差を調整して、線の太さを変更します
• 下線の色を変更するには、色の値 (#222222) を調整します
• 複数の行のインライン要素で動作します
• どんな背景でも動作します

下位互換性のためにすべての独自のプロパティを備えたバージョンを次に示します。

a {     
    /* This code generated from: http://colorzilla.com/gradient-editor/ */
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */

    text-decoration: none;
}

更新: SASSY バージョン

このためのscss mixinを作成しました。SASS を使用しない場合でも、上記の通常のバージョンで問題なく動作します...

@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) {
    background-image: linear-gradient(
        180deg, rgba(0,0,0,0),
        rgba(0,0,0,0) $top,
        $color $top + 0.1%,
        $color $bottom,
        rgba(0,0,0,0) $bottom + 0.1%,
        rgba(0,0,0,0)
    );
    text-decoration: none;
}

次に、次のように使用します。

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

更新 2: ディセンダーのヒント

無地の背景色がある場合は、ディセンダーの見栄えを良くするために、薄い色text-strokeまたは背景と同じ色を追加してみてください。text-shadow

クレジット

これは、私が最初にhttps://eager.io/app/smartunderlineで見つけた手法の簡易版ですが、記事は削除されました。

Answer 5

@last-child の回答はすばらしい回答です。

ただし、H2 に境界線を追加すると、テキストよりも長い下線が作成されました。

CSS を動的に記述している場合、または私のように幸運でテキストがどうなるかを知っている場合は、次のことができます。

1. を適切な長さに変更contentします (つまり、同じ

2. text) フォントの色をtransparent(またはrgba(0,0,0,0))に設定します

<h2>Processing</h2>(たとえば)下線を引くには、last-child のコードを次のように変更します。

a {
    text-decoration: none;
    position: relative;
}
a:after {
    content: 'Processing';
    color: transparent;

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;

    border-width: 0 0 1px;
    border-style: solid;
}

Answer 6

私のフィドルを参照してください。

ボーダー幅プロパティとパディング プロパティを使用する必要があります。見栄えを良くするためにアニメーションを追加しました。

body{
  background-color:lightgreen;
}
a{
  text-decoration:none;
  color:green;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  transition: all .2s ease-in;
}

a:hover{
  color:darkblue;
  border-style:solid;
  border-width: 0px 0px 1px 0px;
  padding:2px;
}

<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>

Answer 7

お望みならば：

• マルチライン
• 点在
• カスタムボトムパディング付き
• ラッパーなし

下線を引くと、高さ 1 ピクセルの背景画像repeat-xと100% 100%位置を使用できます。

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

100%秒を別のものに置き換えたり、下線の垂直位置を調整しpxたりできます。emまたcalc、垂直パディングを追加する場合にも使用できます。たとえば、次のようになります。

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

もちろん、別の色、高さ、デザインで、独自の base64 png パターンを作成することもできます。

インスピレーションの源: http://alistapart.com/article/customunderlines

Answer 8

を使用している場合はtext-decoration: underline;、次を使用して下線とテキストの間にスペースを追加できますtext-underline-position: under;

text-underline-position プロパティの詳細については、こちらをご覧ください

Answer 9

U（アンダーラインタグ）でできました

u {
    text-decoration: none;
    position: relative;
}
u:after {
    content: '';
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1px;
    border-width: 0 0 1px;
    border-style: solid;
}


<a href="" style="text-decoration:none">
    <div style="text-align: right; color: Red;">
        <u> Shop Now</u>
    </div>
</a>