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

2020年10月13日

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.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;
}
.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; }
.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;
}

 

CSS

Posted by arkgame