web-dev-qa-db-ja.com

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

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

cssunderline
239
maxp

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

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

複数行の場合は、複数行のテキストを要素内のスパンで折り返すことができます。例えば。 <a href="#"><span>insert multiline texts here</span></a>はborder-bottomに<span>とpaddingを追加するだけです - Demo

297
chelmertz

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

下記の元の答え。

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つの問題は、それが行の折り返しで少し奇妙に振舞うことです。

102
last-child

あなたはこれを使うことができますtext-underline-position: under

詳細はこちらを参照してください。 https://css-tricks.com/almanac/properties/t/text-underline-position/

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

62
Duc Huynh

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 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 で見つけたテクニックの単純化されたバージョンですが、それ以来記事は削除されました。

11
squarecandy

私はそれが昔からの質問であることを知っていますが、単一行のテキスト設定display: inline-blockそしてheightの設定は私にとってボーダーとテキスト間の距離を制御するためにうまく働きました。

6
Dominic P

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

しかし、私のH2にボーダーを追加すると、テキストよりも長い下線が表示されました。

もしあなたがあなたのCSSを動的に書いているのであれば、あるいは私のようにあなたがラッキーでテキストがどうなるか知っていれば、あなたは次のことをすることができます：

  1. contentを正しい長さのものに変更します。

  2. text）フォントの色を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;
}
6
Michael Greisman

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

<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>
6
Jordan Starrk

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

あなたはborder widthプロパティとpaddingプロパティを使う必要があるでしょう。見栄えを良くするためにアニメーションを追加しました。

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>
3
Stardust

複数行のテキストやリンクの代わりに、テキストをブロック要素の内側のスパンでラップすることができます。

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

それなら<span>の上にborder-bottomとpaddingを追加するだけです。

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

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

あなたはこのフィドルを参照することができます。 https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

2
Daniel Hernandez

お望みならば：

  • 複数行
  • 点在
  • カスタム下パディング付き
  • ラッパーなし

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

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

2番目の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

1
mcmimik

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

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

0
Ifrah

U（Underline Tag）を使ってできました

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>
0
Arun Prasad E S

これは私が使うものです：

html：

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css：

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
0
Constantinos Constantinou

私が使うもの：

<span style="border-bottom: 1px solid black"> Enter text here </span>
0
Francis Acosta