Sử dụng CSS content như thế nào cho đúng

2780

Thuộc tính content trong CSS thường được sử dụng cùng với 2 ghost element là after và before, những giá trị nào có thể đưa vào cho thuộc tính content này

<div 
  data-done="&#x2705;"
  class="email">
    chriscoyier@gmail.com
</div>

.email::before {
  /* Chèn trước thẻ div giá trị của data-done + Email: */
  content: attr(data-done) " Email: "; 
}

Không phải giá trị nào đưa vào content này cũng hợp lệ

/* Được */
::after {
  content: "1";
}

/* Không được */
::after {
  content: 1;
}

Không thể tính toán gì đâu, nó chỉ là string thôi

<div data-price="4" data-sale-modifier="0.9">Coffee</div>

/* Méo chạy */
div::after {
  content: " $" 
    calc(attr(data-price) * attr(data-sale-modifier));
}
/* Nope */
::after {
  content: calc(2 + 2);
}

Muốn nối chuỗi ư?

/* Không chạy đâu, không phải javascript hay php */
::after {
  content: "1" . "2" . "3";
  content: "1" + "2" + "3";

  /* Dùng bình thường thế này thôi */
  content: "1" "2" "3";
  content: "1 2 3";
}

Đường dẫn hình thì được, mà không cho thay đổi kích thước hình ¯_(ツ)_/

p:before {
  content: url(image.jpg);
}

TopDev via Vuilaptrinh