:: önce / :: sonra - CSS Hileleri

::beforeVe ::afterBB'de sözde elemanları bunu, HTML olmama gerek kalmadan bir sayfa üzerine içerik eklemenize olanak sağlayan. Sonuç gerçekte DOM'da olmasa da, sayfada sanki öyleymiş gibi görünür ve esasen şu şekilde olur:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Birini diğerinin üzerinde kullanmanın tek nedeni:

Oluşturulan içeriğin konumsal olarak öğe içeriğinden önce gelmesini istersiniz.
::afterİçeriği de olan “sonra” kaynak sırayla, bu üstündeki konumlandırmak böylece :: doğal birbirinin üzerine yığılmış ise önce.

İçeriğin hala uygulandıkları öğenin içinde olduğuna dikkat edin. Adlandırma, öğeden önce ya da sonra gelebilecekleri gibi geliyor, ama aslında içerideki diğer içerikten önce ya da sonra geliyor.

İçeriğin değeri şunlar olabilir:

Bir dizge: content: "a string"; - özel karakterlerin bir unicode varlığı olarak özel olarak kodlanması gerekir. Glifler sayfasına bakın.
Bir resim: içerik: url (/path/to/image.jpg.webp); - Resim tam boyutlarında eklenir ve yeniden boyutlandırılamaz. Gradyanlar gibi şeyler aslında görüntü olduğundan, sözde bir öğe gradyan olabilir.
Hiçbir şey: içerik: ""; - Arka plan resimleri olarak netleştirme ve resim eklemek için kullanışlıdır (genişliği ve yüksekliği ayarlayın ve hatta arka plan boyutuyla yeniden boyutlandırabilirsiniz).
Bir sayaç: content: counter(li); -: işaretleyici gelene kadar listeleri biçimlendirmek için gerçekten kullanışlıdır.

HTML ekleyemeyeceğinizi unutmayın (en azından HTML olarak işlenecektir). content: "";

: vs ::

Çift iki nokta üst üste (: :) CSS3 sözdizimini destekleyen her tarayıcı da yalnızca (:) sözdizimini destekler, ancak IE 8 yalnızca tek iki nokta üst üste işaretini destekler, bu nedenle şimdilik en iyi tarayıcı desteği için yalnızca tek iki nokta üst üste kullanılması önerilir.

:: sözde içeriği sözde seçicilerden ayırmayı amaçlayan daha yeni bir formattır. IE 8 desteğine ihtiyacınız yoksa, çift iki nokta üst üste kullanmaktan çekinmeyin.

İlişkili

::İlk satır
::ilk harf
Sözde Sınıf Seçiciler

Tarayıcı Desteği

Küçük sorunlar:

Firefox 3.5- sözde öğelerin mutlak konumlandırılmasına izin vermez.
Opera 9.2'de, beyaz boşluk her zaman bu sözde öğe içinde metinmiş gibi görüntülenir pre.
IE 8 bunlarda z-endeksini desteklemiyor