Css’de Seçiciler 2 | Before – After (Selector)

Css ile bir p nesnesinin içerisinde yer alan yazıya sonradan yazı yada görsel ekleyebiliriz. Örneğin p nesnesinin içerisinde yer alan yazının önüne bir yazı eklemek istersek aşağıdaki kodu yazıyoruz.

<style type=”text/css”>
p::before{
content: “sayın”;
}
</style>

Böylece normalde p nesnesinin içerisinde yer alan yazının hemen önüne “sayın” yazısı gelmiş olacak. Burada yer alan content içerik anlamına gelmektedir.

Eğer p nesnesinde yer alan yazının hemen sonrasına bir yazı eklemek istersek bu kez de p nesnesi için p::after özelliğini kullanabiliriz.

<style type=”text/css”>
p::after{
content: ” hoşgeldiniz”;
}
</style>

Böylece p nesnesinin içerisinde yazan yazının hemen sonrasına “hoşgeldiniz” yazmış olduk.

Eğer aynı şekilde yazı yerine bir görsel eklemek istersek bu before yada after seçiminden sonra şu şekilde content seçimi yapabiliriz;

content: url(“foto.jpg”);

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir