::before ::after使い方

##教えて頂きたいこと
before,afterとposition: absolute;の絶対配置の使い方の違いについて教えて欲しいです。

##理解ができないところ
before,afterは前後に文字を入れることが、出来るのは理解できるのですが、
before,afterを使って、前後に何も文字を入れないのに、絶対配置をするのはなぜでしょうか？

position: absolute;で指定するのと何が違うかが分かりません。。。。

##例

html
1<div class="parent">
2  <p>要素①</p>
3</div>

css
1.parent {
2  /*親要素relative*/
3  position: relative;
4}
5.parent p{
6  position: absolute;
7  top: 0;
8  left: 0;
9}

html
1<div class="parent">
2  <p>要素①</p>
3</div>

css
1.parent {
2  position: relative;
3}
4.parent p::after {
5  position: absolute;
6  top: 0;
7  left: 0;

ご教授お願いします。

Lhankor_Mhy

2020/06/25 07:13

「前後に何も文字を入れないのに、絶対配置をする」というのは、position: absolute を指定してある、ということですか？つまり、 hoge::before{ content:""; position: absolute; } みたいな記述の意味が分からない、ということでしょうか？

kei344

2020/06/25 07:25

実際のコードを提示されてはいかがでしょう。

muneyosi

2020/06/25 08:14

分かりづらくてすいません。。。コードを追記しました。教えて頂きると助かります。

行動規範の内容に同意します

回答2件

ベストアンサー

positionと疑似要素はまったくの別物です。

疑似要素の使いどころがわからないということだとおもいますので、
そのように回答します。

例えば以下のようなものを作るとします。

その際、疑似要素を使わずに製作するとすると、

HTML
1<div class="foo"><span></span>テスト</div>

CSS
1div {
2  line-height: 1;
3  margin-bottom: 50px;
4  font-size: 20px;
5}
6
7.foo span {
8  display: inline-block;
9  width: 1em;
10  height: 1em;
11  background: #000;
12  border-radius: 50%;
13  margin-right: 10px;
14}

このような形になるかと思います。
この<span>がHTMLの文書構造上邪魔なものになります。

ですが、疑似要素を使うと以下の用にかけます。

HTML
1<div class="bar">テスト</div>

CSS
1div {
2  line-height: 1;
3  margin-bottom: 50px;
4  font-size: 20px;
5}
6
7.bar::before {
8  content: '';
9  display: inline-block;
10  width: 1em;
11  height: 1em;
12  background: #000;
13  border-radius: 50%;
14  margin-right: 10px;
15}
16