見本のコードのposition: absolute をコメントにすると、before の content が先頭文字上に配置されるようです。さらに、text のスタイリングで position: relative を付けて、top: 0px; right: 0px; とすると、text 枠の左上に配置されるようです。

でも、どうしてposition: relativeは、textの方につけるのでしょうか。position: absolute と両方配置するときの配置の仕方や分け方とその理由を教えて教えていただけるとありがたいです。よろしくお願いします。