After ve before ifadeleri ile istediğimiz elementin öncesine ya da sonrasına herhangi bir içerik ekleyebiliyoruz. Bir menümüz olduğunu düşünelim ve menü elemanlarının başında istediğimiz bir görseli göstermek istiyoruz. Bunu sağlayabilmenin tabi ki birçok yöntem var ancak after ve before ifadelerini kullanarak bu işlemi çok çok kolay bir şekilde gerçekleştirebiliriz.
Aşağıdaki gibi bir menümüz olsun.
<ul id="menu"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul>
Herhangi bir değişiklik yapmadığımız taktirde çıktısı aşağıdaki gibi olacak.
