国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

偽元素 before 和 after 初探

孫吉亮 / 475人閱讀

摘要：偽元素和初探使用了做演示，歡迎點(diǎn)擊預(yù)覽定義首先來看的定義創(chuàng)建一個偽元素，作為已選中元素的第一個子元素，常通過屬性來為一個元素添加修飾性的內(nèi)容。語法語法樣式單冒號樣式引入用來區(qū)分偽類和偽元素。

偽元素 before 和 after 初探

使用了 CodePen 做演示，歡迎點(diǎn)擊預(yù)覽

定義

首先來看 MDN 的定義：

::before 創(chuàng)建一個偽元素，作為已選中元素的第一個子元素，常通過 content 屬性來為一個元素添加修飾性的內(nèi)容。

::after 創(chuàng)建一個偽元素，作為已選中元素的最后一個子元素，常通過 content 屬性來為一個元素添加修飾性的內(nèi)容。

語法 
/* CSS3 語法 */
element::before { 樣式 }

/* （單冒號）CSS2 */
element:before  { 樣式 }

CSS3 引入 :: 用來區(qū)分偽類和偽元素。

使用 添加引號

首先看一下基本使用，在 q 標(biāo)簽的前后加上 ? 和 ?。

HTML 
Some quotes, he said, are better than none.
CSS 
q::before { 
  content: "?";
  color: blue;
}

q::after { 
  content: "?";
  color: red;
}
Result

Adding quotation marks

缸

繪制一個缸的正面圖形。

HTML
CSS 
.vat {
  width: 160px;
  height: 160px;
  border-radius: 160px;
  background-color: #919191;
  position: relative;
}

.vat::before {
  content: "";
  width: 160px;
  height: 40px;
  background-color: white;
  position: absolute;
}

.vat:after {
  content: "";
  width: 160px;
  height: 10px;
  background-color: white;
  position: absolute;
  bottom: 0;
}
Result

vat

孔方兄

繪制一個圓形方孔的圖形。

HTML
CSS 
.money {
  width: 160px;
  height: 160px;
  border-radius: 160px;
  background-color: #8b653a;
  position: relative;
}

.money:after {
  content: "";
  width: 50px;
  height: 50px;
  background-color: white;
  position: absolute;
  bottom: 55px;
  left: 55px;
}
Result

money

待辦清單

一個簡單的代辦清單，奇數(shù)次點(diǎn)擊可打鉤，偶數(shù)次點(diǎn)擊取消打鉤。

HTML 
    
  
  • Buy milk
    • 
  
  • Take the dog for a walk
    • 
  
  • Exercise
    • 
  
  • Write code
    • 
  
  • Play music
    • 
  
  • Relax
    •
CSS 
li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;
}

li.done {
  background: #CCFF99;
}

li.done::before {
  content: "";
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;
}
Javascript 
var list = document.querySelector("ul");
list.addEventListener("click", function(ev) {
  if( ev.target.tagName === "LI") {
     ev.target.classList.toggle("done"); 
  }
}, false);
Result

Todo List

參考

[1] ::before

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93647.html

相關(guān)文章

  • 偽元素 before 和 after 初探

    摘要：偽元素和初探使用了做演示，歡迎點(diǎn)擊預(yù)覽定義首先來看的定義創(chuàng)建一個偽元素，作為已選中元素的第一個子元素，常通過屬性來為一個元素添加修飾性的內(nèi)容。語法語法樣式單冒號樣式引入用來區(qū)分偽類和偽元素。 偽元素 before 和 after 初探 使用了 CodePen 做演示，歡迎點(diǎn)擊預(yù)覽 定義 首先來看 MDN 的定義： ::before 創(chuàng)建一個偽元素，作為已選中元素的第一個子元素，常通過...

    zacklee 評論0 收藏0

  • 偽元素 before 和 after 初探

    摘要：偽元素和初探使用了做演示，歡迎點(diǎn)擊預(yù)覽定義首先來看的定義創(chuàng)建一個偽元素，作為已選中元素的第一個子元素，常通過屬性來為一個元素添加修飾性的內(nèi)容。語法語法樣式單冒號樣式引入用來區(qū)分偽類和偽元素。 偽元素 before 和 after 初探 使用了 CodePen 做演示，歡迎點(diǎn)擊預(yù)覽 定義 首先來看 MDN 的定義： ::before 創(chuàng)建一個偽元素，作為已選中元素的第一個子元素，常通過...

    mdluo 評論0 收藏0

  • 詳解 CSS 屬性 - :before && :after

    摘要：現(xiàn)在我們經(jīng)常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應(yīng)該位于后面，如果順序改為是無效的。 現(xiàn)在我們經(jīng)常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...

    plokmju88 評論0 收藏0

  • 詳解 CSS 屬性 - :before && :after

    摘要：現(xiàn)在我們經(jīng)常在源碼中看到如下的寫法這里的和就是我們今天來探討的偽元素之二。舉例說明在這里我們給偽元素添加了屬性，并賦值為。這里需要注意兩者使用的順序，偽元素應(yīng)該位于后面，如果順序改為是無效的。 現(xiàn)在我們經(jīng)常在 html 源碼中看到如下的寫法： showImg(http://segmentfault.com/img/bVb9y2); 這里的 ::after 和 ::before 就是...

    CoderBear 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<