CSS before after

CSS content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。before after

<style>      .Ap::before {content: "before \21D2"; }      .Ap::after {content: "\21D0 after"; }      #hometown::before {   content: ''; } </style> <p class="Ap">123456</p> <p id="hometown">123456</p>

123456 123456

<style>      .Bp {counter-increment: myIndex; }      .Bp::before {  content:counter(myIndex) "\21d2" ; } </style> <p class="Bp">ABC</p> <p class="Bp">ABC</p> <p class="Bp">ABC</p> <p class="Bp">ABC</p> <p class="Bp">ABC</p>

ABC ABC ABC ABC ABC

<style> a::before {  content: attr(href); } </style> <a href="https://html.ug5g.com/2018/08/css-before-after.html">ug5g.com</a>

ug5g.com

<style>       p::before {  content: open-quote;}       p::after {  content: close-quote;} </style> <p>123456</p>

123456

.A3::before {   content: url(xxx.jpg);} .A3::after {  content: url(xxx.jpg);} </style> <p class="A3"> 12345 </p>

12345

<div style="font-size: 24px ;"><div id="before">div</div><div id="after">div</div><div id="div">div</div></div><style>#before:before{ content:"我是 before"; color:red; } #after:after{content:"我是 after";color:red; } #div:before{ content:"我是 before"; color:red; } #div:after{content:"我是 after";color:red; } </style>

00

#CSS before after#CSS content#css content:counter