回答編集履歴
2
修正
answer
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
勝手訳：__テキスト装飾は、フロートされた・絶対配置された子孫や、原子的インラインレベルの子孫（インラインブロックやインラインテーブルなど）には伝わらないことに注意してください。__
|
|
7
7
|
|
|
8
|
-
なので、`.fas`に`display: inline`がついていることが原因です。
|
|
8
|
+
なので、`.fas`に`display: inline-block`がついていることが原因です。
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
1
表現の軽微な修正
answer
CHANGED
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
> Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.
|
|
4
4
|
[Text](https://www.w3.org/TR/CSS2/text.html#lining-striking-props)
|
|
5
5
|
|
|
6
|
-
勝手訳：
|
|
6
|
+
勝手訳：__テキスト装飾は、フロートされた・絶対配置された子孫や、原子的インラインレベルの子孫（インラインブロックやインラインテーブルなど）には伝わらないことに注意してください。__
|
|
7
7
|
|
|
8
8
|
なので、`.fas`に`display: inline`がついていることが原因です。
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
12
|
-
では、なぜ`span`でラップしたときだけ
|
|
12
|
+
では、なぜ`span`でラップしたときだけ下線が無効になるのかというと、blockification と呼ばれる現象です。
|
|
13
13
|
|
|
14
14
|
> Some layout effects require blockification or inlinification of the box type,
|
|
15
15
|
...
|
|
16
16
|
A parent with a grid or flex display value blockifies the box’s display type.
|
|
17
17
|
[CSS Display Module Level 3](https://www.w3.org/TR/css-display-3/#transformations)
|
|
18
18
|
|
|
19
|
-
つまり、`.fas`がフレックスアイテムである場合、blockification によってブロック要素になってしまうことによります。
|
|
19
|
+
つまり、`.fas`がフレックスアイテムである場合、blockification によってブロック要素になってしまうことにより、下線が有効になっています。
|
|
20
20
|
`span`でラップすることによって`span`がフレックスアイテムになり、`.fas`はフレックスアイテムではなくなるため、インラインブロックが有効となり、`text-decoration`が伝わらなくなる、というのが今回の現象です。
|
|
21
21
|
|
|
22
22
|
---
|