下の線をくっつけたいです。

下の画像のようにしたいのですが、上のようになってしまいます。
どうしたらいいのでしょうか。

html
1<span>「稼ぐ力」</span>

css
1span{
2    font-weight: bold;
3    border-bottom: 10px solid #ebb94d;
4  }

行動規範の内容に同意します

回答2件

ベストアンサー

border-bottomだけだと、完全にくっつけることは難しいかもしれません。

↓以下のようにすると、くっつけることができるかも..と思います。

CSS
1span {
2    font-weight: bold;
3    /* border-bottom: 10px solid #ebb94d; */
4    border-bottom: 5px solid #ebb94d; /* 合計が10pxになるよう、数値は調整してください。 */
5    box-shadow: 0 -5px 0 0 #ebb94d inset; /* 合計が10pxになるよう、数値は調整してください */
6    
7    /* 追加 */
8    line-height: 1;
9    padding-bottom: 0;
10    display: inline-block;
11}

下線の表現は、以下のようにbox-shadowにまとめても良さそうです。
box-shadow: 0 -5px 0 0 #ebb94d inset, 0 5px 0 0 #ebb94d;

(ソースコードがないときの回答です)
勘で答えてみます。

「???」の部分は、「稼ぐ力」を囲っている要素です。お手元のソースコードの該当箇所に合わせて変更してください。

「稼ぐ力」の下の線がborderやbox-shadowでつくられている場合

CSS
1/* パターン1 */
2.??? {
3  line-height: 1;
4  padding-bottom: 0;
5  height: 1em; /* 不要かもしれません */

「稼ぐ力」の下の線が「::before」や「::after」で作られていると仮定

CSS
1/* 暫定対応。とりあえずどのパターンでも対応できそう */
2/* 本当はpadding-bottom、bottom、line-heightなど、実装に合わせて対応すべきとは思われますが.. */
3.???::before {
4  transform: translate(0, -4px); /* 「-4px」は、好きなように調整してください。 */
5}
6
7/* パターン1 */
8.??? {
9  padding-bottom: 0;
10}
11
12/* パターン2 */
13.???::before {
14  line-height: 1;
15}
16
17/* パターン3 */
18.??? {
19  bottom: 4px; /* 「4px」は、好きなように調整してください。 */
20}