html 測試 上入 下出

html 測試 左右 各一 測試

html 測試 單入 單出

html 測試 左入右出

class="ot"









sw

尾部連結 hbbb(xx)

2018年8月2日 星期四

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



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

沒有留言:

張貼留言