一文字だけ大きくした場合の一文にunderlineを引きたい

前提・実現したいこと

　　一文の、最初の一文字部分だけ大きくした場合、text-decoration: underline;　が大きくした一文字の箇所だけズレてしまいます。わかる人がいたら、何卒よろしくお願いします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

(HTML)

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="style2.css"> </head> <body>

<div class="linkpage">
    <span class="first">a</span><span class="later">bcdeabcde</span>
</div>

</body> </html>

(CSS)

*{
margin:0;
padding:0;
}

.linkpage{
text-decoration: underline;
}

.first{
font-size: 50px;
}

.later{
font-size: 25px;
}


### 試したこと

::first-letterなども使ってみましたが、うまくいきませんでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答3件

ベストアンサー

spanで囲んでそれに対して、border-bottom か linear-gradient で下線を付けるのでどうでしょうか。linear-gradientの方が下線の位置の調整ができます。

html
1<div class="linkpage">
2  <span>abcdeabcde</span>
3</div>

css
1*{
2margin:0;
3padding:0;
4}
5.linkpage > span{
6  font-size: 25px;
7  border-bottom: 1px solid;
8/*  background: linear-gradient(transparent 98%, #000 0%);*/
9}
10
11.linkpage::first-letter {
12  font-size: 50px;
13}

投稿2020/04/11 18:21

hatena19

総合スコア34075

chifflot

2020/04/12 05:11

<span>で囲んでborder-bottomで解決しました！大変ありがとうございます！

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

text-decorationを使わない方法でどうでしょうか。

background

css
1.linkpage{
2  background:linear-gradient(transparent 98%, #000 0%);
3  display: inline-block;
4  line-height: 30px;
5}
6
7.first{
8  font-size: 50px;
9  line-height: 50px;
10}

border

css
1.linkpage{
2  display: inline-block;
3  position: relative;
4}
5
6.linkpage:after {
7  content: "";
8  position: absolute;
9  left: 0;
10  right: 0;
11  bottom: 15px;
12  border-bottom: 1px solid #333;
13}

投稿2020/04/11 16:42

soliste16

総合スコア757

chifflot

2020/04/12 05:15

今回は別の方法で解決しましたが、これを機に liner-gradientを学びたい思います。ありがとうございます！

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

フォントによる影響かもしれません。以下を試してみると、いかがでしょうか?
フォントが原因であれば、先に回答のある方法を採用せざるを得ないと考えます。

HTML
1<div class="linkpage">
2  <span class="first">a</span><span class="later">bcdeabcde</span>
3</div> 
4
5<!--Google フォントを追加-->
6<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto&display=swap" rel="stylesheet">

CSS
1* {
2  margin: 0;
3  padding: 0;
4}
5.linkpage {
6  text-decoration: underline;
7  font-family: 'Noto Sans JP', sans-serif; /* フォントを追加 */
8}
9.first {
10  font-size: 50px;
11}
12.later {
13  font-size: 25px;
14}