偽元素 before 和 after 初探

zacklee 發布于2019-08-30 14:13 / 1197人閱讀

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

偽元素 before 和 after 初探

使用了 CodePen 做演示，歡迎點擊預覽

定義

首先來看 MDN 的定義：

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

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

語法

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

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

CSS3 引入 :: 用來區分偽類和偽元素。

使用 添加引號

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

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

待辦清單

一個簡單的代辦清單，奇數次點擊可打鉤，偶數次點擊取消打鉤。

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

云服務器 GPU云服務器偽元素獲取偽元素 before 任意元素和

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115869.html

偽元素 before 和 after 初探

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

孫吉亮 2019-08-22 15:40 評論0 收藏0
偽元素 before 和 after 初探

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

mdluo 2019-08-01 18:43 評論0 收藏0
詳解 CSS 屬性 - :before && :after

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

plokmju88 2019-08-28 17:51 評論0 收藏0
詳解 CSS 屬性 - :before && :after

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

CoderBear 2019-08-01 14:36 評論0 收藏0