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

CSS before after

CSS before after

<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

DIV CSS z-index

DIV CSS z-index

做出區塊或圖片的堆疊效果，必須搭配上 position 語法來設定區塊的位置，才能做出疊在一起的效果，HTML 區塊 div1 先寫， 而 div2 div3 div4 寫在 div1 後面， 因此 div2 重疊在 div1 上方。
要改變 div1 及 div2 重疊次序，我們可以在 div 加入 z-index 元素，那個 z-index 的值越大重疊越靠高位置，如下列 div1 z-index 為1，div2 z-index 為1，div1 顯示在 div2 上方。
在 style CSS 設定 #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"}，在 div 內文字後加入 z-index=0。

再 style CSS 設定 #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after{content: " z-index=1"}， 當 滑鼠 移到 div 上 div 內文字後加入 z-index=1。

再 style CSS 設定 #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1}，當 滑鼠 移到 div 上 div 設定 z-index=1。

<style type="text/css"> #div1 ,#div2 ,#div3 ,#div4 { z-index: 0; text-align:center; width: 200px; height:60px; position: fixed; } #div1:after,#div2:after,#div3:after,#div4:after {content: " z-index=0"} #div1:hover:after,#div2:hover:after,#div3:hover:after,#div4:hover:after {content: " z-index=1"} #div1:hover,#div2:hover,#div3:hover,#div4:hover{z-index: 1} </style> <div id="div1" style="top:30px;left:30px;background-color: #ffd382;" >div 1 </div> <div id="div2" style="top:70px;left:70px;background-color: #ff3392;">div 2 </div> <div id="div3" style="top:110px;left:110px;background-color: #ff6602;">div 3 </div> <div id="div4" style="top:150px;left:150px;background-color: #ffd333;">div 4 </div>

00

, , , , ,