CSSの「下線」属性の線の太さを編集する


117

次のようにCSSでテキストに下線を引くことができるので:

H4 {text-decoration: underline;}

次に、描画された「線」を編集するにはどうすればよいですか。線に表示される色は「色:赤」として簡単に指定できますが、線の高さ、つまり太さを編集するにはどうすればよいですか。


10
h4 {border-bottom: 10px solid #000;}
プラナフ

@PranavKapoor-いいね!それは素晴らしいです、ありがとうございました。境界を含むdivの幅全体ではなく、H4タグのみに境界を設定するために、この境界の幅を「自動」に設定するにはどうすればよいですか?

display:inline-block幅が設定されていることを確認するために追加できますが、内部の要素を使用し、内部の要素<h4>をスタイリングすることをお勧めします。以下の私の答えを確認してください。
プラナフ

1
@PranavKapoor-もう一度!あなたはCSS忍者のようです。ありがとう。下に投稿されたあなたの答えではなく、コメントであなたが与えたこの答えを使用しました。この方法は、テキストを別の<u>タグで囲む必要がないため、より良いと思います。CSS側からこれを完全に制御します。

回答:


91

これを実現する1つの方法を次に示します。

HTML:

<h4>This is a heading</h4>

<h4><u>This is another heading</u></h4>

CSS:

 u {
    text-decoration: none;
    border-bottom: 10px solid black;
  }​

次に例を示します。http//jsfiddle.net/AQ9rL/


91
...または複数行のテキスト
cfx 2014年

その場合、改行の前後に各行のテキストを折り返して<span>、そこにborder-bottomを適用する必要があります。これは、ハードコードされていないシナリオでは苦痛になる可能性がある回避策です。
ファビアン

@cfx可能な場合は、これを使用してこれを行うことができますdisplay: inline;(ただし、この場合、ブロックされなくなり、誰かを助けることができます)。
jave.web

あなたは私の日を作りました。THanks
Tessaracter

これにより、レイアウトが変更されます。境界線は、移動しない下線とは異なり、他の要素を強制的に移動します。
Joel Karunungan

51

最近私は、下線が太すぎてFFのテキストから離れすぎているFFを処理する必要があり、ボックスシャドウのペアを使用してそれを処理するより良い方法を見つけました。

.custom-underline{
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}

最初の影は2番目の影の上に配置されます。これにより、両方の「px」値を変化させることで2番目の影を制御できます。

プラス:さまざまな色、太さ、下線の位置

マイナス:固体でない背景には使用できません

ここで私はいくつかの例を作りました:http : //jsfiddle.net/xsL6rktx/


4
なんて素敵だ。border-bottomに関してこの(少なくとも)の利点は、「線」の太さがテキストに向かって大きくなることです。これにより、テキストと線の間のギャップが小さくなります。
VictorHäggqvist2015

これを行うと、下線に加えて半ピクセルの垂直線が表示されます。
yeahdixon 2017年

ある時点では完璧な答えだったようですが、Chrome 66の要素の両側に非常に細い縦線が表示されます
小さな小さな男

代わりに、使用して透明ことはどんな背景の場合に働くだろう。
Jay Dadhania、2018年

これが最良の答えです。境界線のように位置を変更しないHTMLおよび純粋なCSSソリューションを変更する必要はありません。
Joel Karunungan

15

非常に簡単です。小さいフォントと下線を含む「span」要素の外側、および大きいフォントサイズを含む「font」要素の内側。

<span style="font-size:1em;text-decoration:underline;">
 <span style="font-size:1.5em;">
   Text with big font size and thin underline
 </span>
</span>


8
廃止された<font>タグをタグに置き換えるとspan、これが実際に質問に対処する唯一の回答になります。
matteo

11

これを行う別の方法は、下線を引く要素に ":after"(疑似要素)を使用することです。

h2{
  position:relative;
  display:inline-block;
  font-weight:700;
  font-family:arial,sans-serif;
  text-transform:uppercase;
  font-size:3em;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  background:#000;
  height:1px;

}

10

ありtext-decoration-thicknessの一部は現在、CSSテキスト装飾モジュールレベル4。これは「編集者の下書き」段階にあるため、進行中の作業であり、変更される可能性があります。2020年1月の時点で、FirefoxとSafariでのみサポートされています。

text-decoration-thickness CSSプロパティは、線、下線、上線などの要素内のテキストで使用される装飾線の太さ、つまり幅を設定します。

a {
  text-decoration-thickness: 2px;
}

Codepen:https ://codepen.io/mrotaru/pen/yLyLOgr (Firefoxのみ)


CSSテキスト装飾モジュールレベル3のtext-decoration-color一部であるもあります。これはより成熟しており(Candidate Recommendation)、ほとんどの主要なブラウザでサポートされています(例外はEdgeとIEです)。もちろん、線の太さを変更するために使用することはできませんが、より「ミュートされた」下線を実現するために使用できます(コードペンにも表示されます)。


ユーザーがFirefoxを使用している場合、すべてのテキスト装飾にでアクセスできますtext-decoration。これがそれらすべてに含まれるように計画されているかどうかはわかりませんが、含まれている場合は将来的に非常に便利です。編集:これはでこれをサポートする作業草案text-decorationです。
暴風雨

9

私は次のような簡単なことをします:

.thickness-underline {
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid black;
    margin-bottom: -1px;
}
  • line-heightまたはpadding-bottomを使用して、それらの間の位置を設定できます。
  • display: inline場合によっては使用できます

デモ: http : //jsfiddle.net/5580pqe8/

CSS下線


残念ながら、margin-bottomは負の値を取得できません。
soleshoe

5
@soleshoe不正解です。要素の下部に負のマージンを設定できます。
Alex

7

background-image、下線の作成にも使用できます。

それを介して下にシフトしbackground-position、水平方向に繰り返す必要があります。線の幅はある程度調整できますbackground-size(背景は要素のコンテンツボックスに限定されます)。

.underline
{
    --color: green;
    font-size: 40px;
    background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
    background-repeat: repeat-x;
    background-position: 0 1.05em;
    background-size: 2px 5px;
}
<span class="underline">
     Underlined<br/>
     Text
</span>


6

a {
  text-decoration: none;
  position: relative;
}

a.underline {
  text-decoration: underline;
}

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
<h1><a href="#" class="underline">Default: some text alpha gamma<br>the quick brown fox</a></h1>
<p>Working:</p>
<h1><a href="#" class="shadow">Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</a></h1>
<br>

最終的な解決策:http : //codepen.io/vikrant-icd/pen/gwNqoM

a.shadow {
   box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}

1
アンダーラインの問題は、ブラウザーによってレンダリングが異なります。
Joel Karunungan

3

新しいcssオプションの魔法のおかげで、これは現在ネイティブで可能です:

a {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 3px;
}

現在のところ、サポートは比較的貧弱です。しかし、最終的にはff以外のブラウザにも表示されるでしょう。


2

私の解決策:https//codepen.io/SOLESHOE/pen/QqJXYj

{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 0;
    line-height: 70%;
}

下線の位置はline-heightの値で、下線の太さやスタイルはborder-bottomで調整できます。

hrefに下線を付ける場合は、デフォルトの下線動作を無効にするように注意してください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.