文字のアンダーライン

2019/10/25 2019/10/30

アンダーラインを引きたいブロックに「under」とクラス指定。

後は引きたい線のスタイルごとに下記のCSSを張り付けるだけ。

線の大きさ、色も指定可能。

.under {
  border-bottom: solid 2px #000000;
}

.under {

border-bottom: solid 2px #000000;

}

.under {
  border-bottom: dashed 2px #000000;
}

.under {

border-bottom: dashed 2px #000000;

}

.under {
  border-bottom: double 6px #000000;
}

.under {

border-bottom: double 6px #000000;

}

※文字の大きさは２本分の大きさになるので、少し大きめに指定するといい。

.under {
　background: linear-gradient(transparent 50%, yellow 50%);
}

.under {

　background: linear-gradient(transparent 50%, yellow 50%);

}

transparentの％を大きくするほど線は細くなる。０%だと文字いっぱいになる。