before afterの必要性について

Question

before after をつければ前後に文字や記号などをいられると学んだのですが、わざわざそれらを使う意味とは何でしょうか？
下記コードのpの前後に文字を入れたかったとすればわざわざbefore afterを使わずなあかさたなはのように入力すれば良いのではないでしょうか？

Comments

[m.ts10806]

質問に提示のコードはなんの意図があるのでしょうか
＜p＞
ただ、これだとそのままブラウザに出ますよ

[teruyoru]

コードの意図としては
コードの中のあかさたなに対して
前後にな、とはを追加することを説明したかったので書きました

Answer 1

HTMLとCSSの役割の違いです。

HTMLはテキストを構造を持って書きます。
CSSはそれをどのように表示するかを書きます。

それがテキストならHTMLに書くし、表示スタイルの一種として書くならCSSに書きます。

違いが分からないとすると、判断の一例としては、
例えば視覚障害者用の読み上げブラウザにて、
・読み上げてもらわないと意味が伝わらない物 ⇒ テキスト
・読み上げてもらう必要がない物。読み上げると分かりにくくなる物 ⇒ 表示スタイル
でどうでしょうか。

Answer 2

わざわざそれらを使う意味とは何でしょうか？

:beforeや:afterには本体と独立したスタイルも適用可能ですので、「スタイルの都合上別エレメントが必要」という場合に便利です。

（「スタイルの都合だけで余計なエレメントをHTMLに書く」のは、あまり行儀が良くないです）

Answer 3

例が「ほとんど意味がない使い方をしてるだけ」だと思います。文字を入れることだけが全てではないですから。「要素」 について調べると見えてくることもあるかと思います。

Comments

[teruyoru]

ご回答ありがとうございます。

[m.ts10806]

「意味を持たせる」のも作る側の仕事であり醍醐味です。