回答編集履歴

5

修正

2020/04/26 00:56

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -31,6 +31,10 @@
31
31
  ```
32
32
 
33
33
 
34
+
35
+ 下線の表現は、以下のようにbox-shadowにまとめても良さそうです。
36
+
37
+ `box-shadow: 0 -5px 0 0 #ebb94d inset, 0 5px 0 0 #ebb94d;`
34
38
 
35
39
 
36
40
 

4

訂正

2020/04/26 00:56

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  border-bottom: 5px solid #ebb94d; /* 合計が10pxになるよう、数値は調整してください。 */
16
16
 
17
- box-shadow: 0 -5px 0 0 #ebb94d; /* 合計が10pxになるよう、数値は調整してください */
17
+ box-shadow: 0 -5px 0 0 #ebb94d inset; /* 合計が10pxになるよう、数値は調整してください */
18
18
 
19
19
 
20
20
 

3

修正

2020/04/26 00:53

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -2,7 +2,9 @@
2
2
 
3
3
 
4
4
 
5
- ↓以下のようにすると、くっつけることができるのでは..と思います。
5
+ ↓以下のようにすると、くっつけることができるかも..と思います。
6
+
7
+ ```CSS
6
8
 
7
9
  span {
8
10
 
@@ -25,6 +27,8 @@
25
27
  display: inline-block;
26
28
 
27
29
  }
30
+
31
+ ```
28
32
 
29
33
 
30
34
 

2

ソースコードをいただけたので、追記します!

2020/04/26 00:52

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -1,3 +1,39 @@
1
+ border-bottomだけだと、完全にくっつけることは難しいかもしれません。
2
+
3
+
4
+
5
+ ↓以下のようにすると、くっつけることができるのでは..と思います。
6
+
7
+ span {
8
+
9
+ font-weight: bold;
10
+
11
+ /* border-bottom: 10px solid #ebb94d; */
12
+
13
+ border-bottom: 5px solid #ebb94d; /* 合計が10pxになるよう、数値は調整してください。 */
14
+
15
+ box-shadow: 0 -5px 0 0 #ebb94d; /* 合計が10pxになるよう、数値は調整してください */
16
+
17
+
18
+
19
+ /* 追加 */
20
+
21
+ line-height: 1;
22
+
23
+ padding-bottom: 0;
24
+
25
+ display: inline-block;
26
+
27
+ }
28
+
29
+
30
+
31
+
32
+
33
+ ---
34
+
35
+ (ソースコードがないときの回答です)
36
+
1
37
  勘で答えてみます。
2
38
 
3
39
 

1

修正

2020/04/26 00:52

投稿

new1ro
new1ro

スコア4528

test CHANGED
@@ -10,13 +10,15 @@
10
10
 
11
11
  ```CSS
12
12
 
13
+ /* パターン1 */
14
+
13
15
  .??? {
14
16
 
15
17
  line-height: 1;
16
18
 
17
19
  padding-bottom: 0;
18
20
 
19
- }
21
+ height: 1em; /* 不要かもしれません */
20
22
 
21
23
  ```
22
24