htmlのarwとbtn01の空白をあける意味が分かりません。cssのarwとbtn01を別々に指定している意味が分かりません。htmlで::を使う意味がわかりません

Question

前提・実現したいこと

https://www.try110.com/bousai_kawara/
というサイトの模写コーディングをしているのですが、デベロッパーツールを見ると、

↑のように"arw btn01"のようにarwとbtn01は何のために空白を開けるのか分かりません。

デベロッパーツールでcssを見ても

↑のようにbtn01とarwが別々に指定されているのでなぜなのか分かりません。

それと、画像のhtmlの
::before
"鶴屋コーポレートサイトへ"
::after
の意味が理解できません。なんの為にこうするのでしょうか？

Answer 1

class - HTML: HyperText Markup Language | MDN

class グローバル属性 は、要素のクラスを空白区切りで並べたリストで、大文字小文字を区別します。クラスは CSS の クラスセレクター や JavaScript の DOM メソッド document.getElementsByClassName といった関数により、特定の要素を選択したり特定の要素にアクセスしたりすることを可能にします。

闇雲に「模写」するのではなく、基本を勉強してからそれらを理解するためにしてください。

Answer 2

↑のように"arw btn01"のようにarwとbtn01は何のために空白を開けるのか分かりません。

クラスを2つ指定しています。
何かしらの理由があって1つにまとめるのではなくそれぞれのクラスで属性を指定しているのだと思われます。

それと、画像のhtmlの

::before
"鶴屋コーポレートサイトへ"
::after
の意味が理解できません。

疑似要素ですね。
擬似要素 (Pseudo-elements)

Comments

[yu...]

::before
"鶴屋コーポレートサイトへ"
::after
についてですが、MDNで調べてもあまり意味が分かりません。
今回の場合はこれをすることによってどういう意味があるのか具体的に教えていただきたいです。

[meg_]

実際に疑似要素を消してみて挙動の変化を確かめてみられてはどうでしょうか？

[meg_]

下記サイトの説明が分かりやすいかと思います。
https://www.asobou.co.jp/blog/web/css2

Answer 3

arwはボタンの中の文字「鶴弥のコーポレートサイトへ」を表していて、btn01はボタン自体を表しているのでは？？