「CSS」::before(::after)で選択要素の最初（最後）の要素を追加する方法

2014年7月23日2020年10月13日

構文
::before
選択した要素の最初の子要素として擬似要素を作成します。
使用例1
htmlコード
<span class="contInfo">AAA 12345</span>
CSSコード

.contInfo {
  background-color: green;
}

.contInfo::before {
  content: "最初の子要素";
  background-color: yellow;
  border-color: black;
  border-style: dotted;
}
.contInfo::after {
  content: "最後の子要素";
  background-color: red;
  border-color: black;
  border-style: dotted;
}