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

<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: "; 
}

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

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

<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);
}

/* 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";
}

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