::before ::after使い方

Question

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

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

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

##例

<div class="parent">
  <p>要素①</p>
</div>

.parent {
  /*親要素relative*/
  position: relative;
}
.parent p{
  position: absolute;
  top: 0;
  left: 0;
}

<div class="parent">
  <p>要素①</p>
</div>

.parent {
  position: relative;
}
.parent p::after {
  position: absolute;
  top: 0;
  left: 0;

ご教授お願いします。

Comments

[Lhankor_Mhy]

「前後に何も文字を入れないのに、絶対配置をする」というのは、position: absolute を指定してある、ということですか？

つまり、
hoge::before{ content:""; position: absolute; }
みたいな記述の意味が分からない、ということでしょうか？

[kei344]

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

[muneyosi]

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

Answer 1

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

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

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

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

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

div {
  line-height: 1;
  margin-bottom: 50px;
  font-size: 20px;
}

.foo span {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #000;
  border-radius: 50%;
  margin-right: 10px;
}

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

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

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

div {
  line-height: 1;
  margin-bottom: 50px;
  font-size: 20px;
}

.bar::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #000;
  border-radius: 50%;
  margin-right: 10px;
}

<span>がなくなりましたね。
こういった、無駄なものをなくしてシンプルにスタイルをかける、
そのために疑似要素をつかったりします。

Comments

[muneyosi]

分かりやすくコードまで、書いて頂きありがとうございます。
すごく分かり易かったです。
本当にありがとうございます。

Answer 2

before,afterを使って、前後に何も文字を入れないのに、絶対配置をするのはなぜでしょうか？

本当に何も入れない（content:すらない）場合、疑似要素は表示されませんので、全く無意味です。

一方で、content: ""がある場合、position: absolute;は疑似要素にだけ適用されます。本体のエレメントとは全く別な場所に、（多くは装飾目的で）疑似要素「だけ」表示することができます。

Comments

[maisumakun]

追記されたコードは、疑似要素が表示されない、無意味なパターンです。