[CSS]::after (:after)で最後の要素に類似要素を追加する

2020年10月19日

構文
::after (:after)
CSS において ::after は、選択した要素の最後の子要素として擬似要素を作成します。
htmlコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div class="after-text">AA</div>
<div>BB</div>
<div class="after-text2">CC</div>
<div class="after-text">AA</div> <div>BB</div> <div class="after-text2">CC</div>
<div class="after-text">AA</div>
<div>BB</div>
<div class="after-text2">CC</div>

CSSコード

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.after-text::after {
content: " <- yyyy";
color: green;
}
.after-text2::after {
content: " <- xxx";
color: blue;
}
.after-text::after { content: " <- yyyy"; color: green; } .after-text2::after { content: " <- xxx"; color: blue; }
.after-text::after {
  content: " <- yyyy";
  color: green;
}
.after-text2::after {
  content: " <- xxx"; 
  color: blue;
}

 

CSS

Posted by arkgame