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

306

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

css  underline 
— maxp
ソース
1
これは、あなたが求めていたものを正確にはありませんが、それは、件名に興味深い読み取りました：CSSデザイン：カスタム下線
— ピーター・ローウェル
距離は使用するフォントによって決まります。Webセーフフォントを試してください。
— アレクセイダンチェンコフ2014
1
CSS3には、最近多くの新しいテキスト装飾プロパティがあります。alligator.io/css/text-decorationの例を確認してください。text-underline-position: under;そしてtext-decoration-skip: ink;、これはおそらく古いブラウザーとの下位互換性がないことに注意してください。
— chocolata
1
— w3spi 2018
1
投票text-underline-offsetここに：bugs.chromium.org/p/chromium/issues/...
— マーク・フィッシャー

回答:

356

いいえ、でもborder-bottom: 1px solid #000やのようなもので行くことができますpadding-bottom: 3px。

「下線」（この例では境界線）と同じ色が必要な場合は、色の宣言を省略border-bottom-width: 1pxしborder-bottom-style: solidます（ie および）。

複数行の場合、要素内のスパンで複数行のテキストをラップできます。例えば、<a href="#"><span>insert multiline texts here</span></a>その後、ちょうど追加border-bottomし、padding上の<span>- デモ

— ヘルメルツ
ソース
3
このトリックに関する私の唯一の問題は、divの高さに等しいline-heightを使用し、次にvertical-alignを使用している場合です。中央揃えにするには、下線がdivの下になるため、このトリックを使用できません。
— deweydb
@deweydb：padding-bottomをコンテナーdivにも追加するのはどうですか？jsfiddle.net/dYfjc/1
— chelmertz
+1 colorプロパティをオフにしてフォントの色を継承することについては知りませんでした。これにより、将来、汗と涙を大幅に節約できます。
— ラリー
9
なぜこの回答に多くの賛成票があるのか​​はよくわかりません。これは複数行のテキストでは完全には機能しません。
3
複数行の場合、要素内のスパンで複数行のテキストをラップできます。たとえば<a href="#"><span>insert multiline texts here</span></a>、border-bottomとpaddingをに追加します<span>。jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

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つの問題は、行の折り返しで少し奇妙な動作をすることです。

— 最後の子
ソース
2
これは私の特定の問題では機能しませんが、これは素晴らしいトリックです。+1
11
良い回避
— 策
@ last-childこれは下線よりも優れていますが、テキストの折り返しではすべての行で機能するわけではありません
— Nishantha
1つの問題は、境界線と下線が2つの異なるものであることです。たとえば、テキストの一部が下線の下にある必要があります。aタグをボタンとしてスタイル設定する場合、border-bottomを下線として使用する自由はありません。
— アンデルスリンデン、2015
10
Web開発の初心者、グラフィックデザイナー、平均的なユーザー、またはあなたのお母さんに、これがテキストと下線の間に制御されたスペースを追加するために必要なことであり、あなたがあなたの人生で何をしているのか疑問に思うことを想像してみてください。 。
— MarcGuay 2016年
79

これを使えます text-underline-position: under

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

ブラウザの互換性もご覧ください。

— ダック・フイン
ソース
2
ありがとう！破線の下線を付けようとしていて、テキストの下部と線の間にスペースがなく描かれている場合、これで問題が解決します。
— ジョナサンクロス
6
これは、回避策のない最新のブラウザーの正解です。
— Paras Shah
2
ベンダープレフィックスが付いていても、Firefoxでは機能しませんが、W3C仕様のw3.org/TR/css-text-decor-3/#text-underline-position-propertyに含まれています。その他の関連リソース：quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
現時点では、これはChromeブラウザでのみ機能し、他のブラウザのソリューションではありません。
— miir 2018年
2
まあ、このコメントの日付の時点で、これはFirefoxでも機能するようです。
— Jarad
15

これが私にとってうまくいくものです。 

<style type="text/css">
  #underline-gap {
    text-decoration: underline;
    text-underline-position: under;
  }
</style>
<body>
  <h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
スニペットを展開

— ジョーダン・スターク
ソース
2
それは注意することが重要であるtext-underline-positionにつきとしてのFirefoxでサポートされていませんdeveloper.mozilla.org/en-US/docs/Web/CSS/...
— Floran Gmehlin
とても興味深い。素晴らしい吹き出し。ありがとうございました！
— ジョーダンスターク
同じリンクに従って、74から始まるFirefoxでサポートされています。
— GSerg
11

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

これは私のために働きました：

   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ミックスインを作りました。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で見つけた手法の簡略化されたバージョンですが、この記事は廃止されました。

— スクエアキャンディー
ソース
残念ながらeager.ioリンクはもう機能しません。ディセンダーをより見栄えよくするためのハックは何だったか覚えていますか？
— カノ2017年
1
@狩野-単色の背景と同じ色のテキストシャドウを使用していたと思います。
— squarecandy
また、上記の手法を使用すると、下線の色をテキストとは異なる色に設定できるため、下線との衝突が読みやすくなる問題が少なくなるように、テキストよりも明るい色に設定する場合があります。
— squarecandy
7

私はそれが古い質問であることを知っていますが、1行のテキスト設定display: inline-blockとその後の設定でheightは、境界線とテキストの間の距離を制御するのにうまくいきました。

— ドミニクP
ソース
1
高さを設定する必要はありませんでした。別のdivでラップしただけで、中央揃えにしたいので、out divにtext-alignを設定しました。
— ガイ・ロウ
6

@最後の子の答えは素晴らしい答えです！

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

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

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

  2. テキスト）にフォント色を設定transparent（またはrgba(0,0,0,0)）

下線に<h2>Processing</h2>（たとえば）、最後の子のコードを次のように変更します。

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;
}
— マイケル・グレイスマン
ソース
9
H2は、下線がテキストよりも長い理由を説明する可能性があるブロック要素です。多分それdisplay: inline-blockを修正するでしょう。テキストを置き換えると、contentさまざまな方法で破損する可能性のあるハックのように見えます。
— 最後の子
3

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

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

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>
スニペットを展開

— スターダスト
ソース
2

複数行のテキストまたはリンクの代わりに、ブロック要素内のスパンでテキストをラップできます。 

<a href="#">
    <span>insert multiline texts here</span>
</a>

次に、border-bottomとpaddingをに追加します<span>。

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

このフィドルを参照してください。https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

— ダニエル・エルナンデス
ソース
2

お望みならば：

  • マルチライン
  • 点在
  • カスタム底パディングあり
  • ラッパーなし

下線、高さ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 : //www.patternify.com/-正方形の幅と高さを2x1に設定するだけです。

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

— mcmimik
ソース
1

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

詳細については、text-underline-positionプロパティを参照してください。

— イフラ
ソース
0

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>
— アルンプラサードES
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.