偽元素 before 和 after 初探

山頂的男人發表於2019-02-16

偽元素 before 和 after 初探

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

定義

首先來看 MDN 的定義：

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

::after 建立一個偽元素，作為已選中元素的最後一個子元素，常通過 content 屬性來為一個元素新增修飾性的內容。

語法

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

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

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

使用

新增引號

首先看一下基本使用，在 q 標籤的前後加上 « 和 »。

HTML

<q>Some quotes,</q> he said, <q>are better than none.</q>

CSS

q::before { 
  content: "«";
  color: blue;
}

q::after { 
  content: "»";
  color: red;
}

Result

Adding quotation marks

缸

繪製一個缸的正面圖形。

HTML

<div class=`vat`></div>

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

<div class="money"></div>

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

<ul>
  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Exercise</li>
  <li>Write code</li>
  <li>Play music</li>
  <li>Relax</li>
</ul>

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

相關文章