{"id":293,"date":"2024-02-21T02:33:26","date_gmt":"2024-02-20T23:33:26","guid":{"rendered":"https:\/\/mudosdigital.com\/tr\/?p=293"},"modified":"2024-02-21T02:36:00","modified_gmt":"2024-02-20T23:36:00","slug":"css-ile-before-ve-after-secicileri-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/mudosdigital.com\/tr\/css-ile-before-ve-after-secicileri-nasil-kullanilir\/","title":{"rendered":"CSS ile before ve after se\u00e7icileri nas\u0131l kullan\u0131l\u0131r?"},"content":{"rendered":"\n<p>CSS&#8217;in g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131ndan biri olan <code>::before<\/code> ve <code>::after<\/code> se\u00e7icileri, web tasar\u0131m\u0131nda benzersiz ve g\u00f6rsel olarak \u00e7ekici i\u00e7erikler olu\u015fturman\u0131n harika bir yoludur. Bu se\u00e7iciler, HTML elementlerinin ba\u015flang\u0131c\u0131na ve sonuna dinamik olarak i\u00e7erik eklemenize olanak tan\u0131r, bu da sayfan\u0131z\u0131 canland\u0131r\u0131r ve daha etkileyici bir g\u00f6r\u00fcn\u00fcm sa\u011flar. Peki CSS ile before ve after se\u00e7icileri nas\u0131l kullan\u0131l\u0131r?<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"550\" height=\"604\" src=\"https:\/\/mudosdigital.com\/tr\/wp-content\/uploads\/sites\/2\/2024\/02\/image-1.png\" alt=\"Bir HTML sayfa yap\u0131s\u0131nda, <td&gt; elementi i\u00e7in uygulanan ::before se\u00e7icisi. Burada geli\u015ftiriciler, <td&gt; elementinin \u00f6ncesine &quot;Son g\u00fcncelleme&quot; yazan bir metin kullan\u0131yor.\" class=\"wp-image-295\"\/ loading=\"lazy\" srcset=\"https:\/\/mudosdigital.com\/tr\/wp-content\/uploads\/sites\/2\/2024\/02\/image-1.png 550w, https:\/\/mudosdigital.com\/tr\/wp-content\/uploads\/sites\/2\/2024\/02\/image-1-273x300.png 273w, https:\/\/mudosdigital.com\/tr\/wp-content\/uploads\/sites\/2\/2024\/02\/image-1-382x420.png 382w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/><figcaption class=\"wp-element-caption\">Bir HTML sayfa yap\u0131s\u0131nda, &lt;table> elementi i\u00e7erisinde yer alan &lt;td> elementi i\u00e7in uygulanan ::before se\u00e7icisi. Burada geli\u015ftiriciler, &lt;td> elementinin, yani belirli bir s\u00fctundaki h\u00fccrelerin \u00f6ncesine &#8220;Son g\u00fcncelleme&#8221; yazan bir metin kullan\u0131yor.<\/figcaption><\/figure>\n\n\n\n<p>Bir \u00f6rnek d\u00fc\u015f\u00fcnelim: Belki de bir ba\u015fl\u0131k metniniz var ve onun \u00f6ncesine veya sonras\u0131na ho\u015f bir simge veya s\u00fcsleme eklemek istiyorsunuz. \u0130\u015fte bu noktada <code>::before<\/code> ve <code>::after<\/code> se\u00e7icileri devreye girer. Bu se\u00e7icileri kullanarak, metninizi veya di\u011fer elementlerinizi daha \u00e7ekici ve dikkat \u00e7ekici hale getirebilirsiniz.<\/p>\n\n\n\n<p>CSS&#8217;te before ve after se\u00e7icileri kullanarak HTML sayfalar\u0131nda s\u00f6zde \u00f6geler olu\u015fturmak olduk\u00e7a kolayd\u0131r. Bu se\u00e7iciler, bir \u00f6genin \u00f6ncesine veya sonras\u0131na metin veya g\u00f6rsel eklemek i\u00e7in ideal bir ara\u00e7 sa\u011flar. Bu y\u00f6ntem, \u00f6zellikle bir \u00f6genin t\u00fcm HTML sayfalar\u0131na uygulanmas\u0131n\u0131 istedi\u011finizde, manuel olarak her sayfay\u0131 d\u00fczenlemek yerine daha pratik bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n\n\n\n<p>HTML sayfan\u0131zda bir \u00f6genin \u00f6ncesine veya sonras\u0131na bir metin veya g\u00f6rsel eklemek istedi\u011finizi d\u00fc\u015f\u00fcnelim. Ancak bu metin veya g\u00f6rsellerin t\u00fcm HTML \u00f6gelerine uygulanmas\u0131n\u0131 istiyorsunuz. B\u00f6ylesi bir senaryoda, t\u00fcm HTML sayfalar\u0131 ziyaret ederek teker teker yeni \u00f6geler eklemek olduk\u00e7a zaman \u00f6ld\u00fcr\u00fcc\u00fc olabilir. Bu a\u015famada CSS&#8217;te kullan\u0131lan before ve after se\u00e7icileri devreye girer.<\/p>\n\n\n\n<p>Asl\u0131nda bu i\u015flemi JavaScript ile de yapmak m\u00fcmk\u00fcnd\u00fcr. Ancak her geli\u015ftiricinin JavaScript bilgisi ileri seviye olmayabiliyor. Ayr\u0131ca baz\u0131 durumlarda JavaScript kullanmak, HTML sayfalar taray\u0131c\u0131da renderlan\u0131rken, yani olu\u015fturulurken gecikmeye sebep olabiliyor. O halde CSS ile bu i\u015flemi daha basit bir hale getirebiliriz.<\/p>\n\n\n\n<div class=\"wp-block-group mudos-schedule-appointment has-background\" style=\"background-color:#f2f2f2\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\">Daha fazla yard\u0131ma m\u0131 ihtiyac\u0131n\u0131z var?<\/h2>\n\n\n\n<p>Hemen randevu olu\u015fturarak Mudos Digital ile sorunlar\u0131n\u0131z\u0131 payla\u015f\u0131n.<\/p>\n\n\n\n<!-- Google Calendar Appointment Scheduling begin -->\n<link href=\"https:\/\/calendar.google.com\/calendar\/scheduling-button-script.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/calendar.google.com\/calendar\/scheduling-button-script.js\" async><\/script>\n<script>\n(function() {\n  var target = document.currentScript;\n  window.addEventListener('load', function() {\n    calendar.schedulingButton.load({\n      url: 'https:\/\/calendar.google.com\/calendar\/appointments\/schedules\/AcZssZ3cb1MdGEei1XQIF9x3hzAETXnxUmYlCEL5s4OPlXdUCUmdwDgsiQiLPE2QcUbNljp9nIRG-_gB?gv=true',\n      color: '#039BE5',\n      label: 'Randevu olu\u015fturun',\n      target,\n    });\n  });\n})();\n<\/script>\n<!-- end Google Calendar Appointment Scheduling -->\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Kullan\u0131m senaryolar\u0131<\/h2>\n\n\n\n<p>E\u011fer yazd\u0131\u011f\u0131n\u0131z CSS kodunu global olarak uygularsan\u0131z, o halde t\u00fcm sayfalarda bu \u00f6zelli\u011fin ilgili HTML \u00f6gelere uygulanmas\u0131n\u0131 sa\u011flars\u0131n\u0131z. \u00d6rne\u011fin bir tablo i\u00e7erisinde ilk s\u00fctunda yer alan &lt;td> elementlerine before ve after se\u00e7icileri uygulayacaksak, o halde yazaca\u011f\u0131m\u0131z kod \u015f\u00f6yle olmal\u0131<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>table td:nth-child(1):before {\n  content: \"Buraya metin giriyoruz\";\n}<\/code><\/pre>\n\n\n\n<p>E\u011fer bir &lt;div> \u00f6gesine uygulayacaksak, o halde onu se\u00e7meliyiz. Ancak burada belirli bir &lt;div> \u00f6gesine se\u00e7mek istiyorsak, \u00f6ncelikle onun s\u0131n\u0131f ve ID&#8217;sini se\u00e7memiz gerekir.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ornek-class-ismi {\n  content: \"Buraya metin giriyoruz\";\n}<\/code><\/pre>\n\n\n\n<p>Bu senaryoda e\u011fer &lt;div> \u00f6gesi bir class veya ID&#8217;ye sahipse yeniden &lt;div> \u00f6gesini se\u00e7memize gerek yok. Do\u011frudan class veya ID ile ilgili HTML \u00f6geyi se\u00e7ebiliriz. E\u011fer ilgili &lt;div> \u00f6gesinin i\u00e7erisinde bir ba\u015fka \u00f6geyi se\u00e7eceksek o halde:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.ornek-class-ismi span {\n  content: \"Buraya metin giriyoruz\";\n}<\/code><\/pre>\n\n\n\n<p>B\u00f6ylece &#8220;ornek-class-ismi&#8221; s\u0131n\u0131f\u0131na sahip class i\u00e7erisindeki &lt;span> \u00f6gesini se\u00e7mi\u015f oluyoruz. A\u015fa\u011f\u0131daki \u00f6rnek s\u00f6zde bir element \u00f6rne\u011fi canl\u0131 olarak g\u00f6sterilmi\u015ftir.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Daha fazla kayna\u011fa m\u0131 ihtiyac\u0131n\u0131z var? MDN d\u00f6k\u00fcmantasyonunu inceleyin: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/::before\">::before &#8211; CSS: Cascading Style Sheets | MDN (mozilla.org)<\/a><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u00d6rnek Girdi<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p id=\"pseudo-sample\">Bu bir paragraf elementidir ve bu paragraf elementinin \u00f6ncesine :before kullan\u0131larak s\u00f6zde element uygulanm\u0131\u015ft\u0131r.&lt;\/p>\r\n&lt;style>\r\n #pseudo-sample:before {\r\n  content: \"Bu bir \u00f6rnek s\u00f6zde elementtir. \";\r\n  font-size: 10px;\r\n}\r\n&lt;\/style><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00d6rnek \u00c7\u0131kt\u0131<\/h3>\n\n\n\n<p id=\"pseudo-sample\">Bu bir paragraf elementidir ve bu paragraf elementinin \u00f6ncesine :before kullan\u0131larak s\u00f6zde element uygulanm\u0131\u015ft\u0131r.<\/p>\n<style>\n #pseudo-sample:before {\n  content: \"Bu bir \u00f6rnek s\u00f6zde elementtir. \";\n  font-size: 10px;\n}\n<\/style>\n\n\n\n<h2 class=\"wp-block-heading\">Alternatif senaryolar<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Liste Elemanlar\u0131na \u0130kon Ekleme<\/strong>:<br>HTML&#8217;de bulunan bir liste \u00f6gesinin her bir eleman\u0131na, \u00f6rne\u011fin bir ok i\u015fareti eklemek istiyorsan\u0131z:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>ul li:before {\n  content: \"\\2022\"; \/* Bullet karakteri *\/\n  margin-right: 0.5em; \/* \u0130kon ile metin aras\u0131ndaki bo\u015fluk *\/\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"2\">\n<li><strong>Ba\u011flant\u0131lar\u0131n Sonuna \u0130kon Ekleme<\/strong>:<br>T\u00fcm ba\u011flant\u0131lar\u0131n sonuna bir d\u0131\u015f ba\u011flant\u0131 simgesi eklemek istiyorsan\u0131z:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>a:after {\n  content: url(d\u0131s-baglanti-ikonu.png);\n  margin-left: 0.5em; \/* \u0130kon ile metin aras\u0131ndaki bo\u015fluk *\/\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"3\">\n<li><strong>Buton Stillerini Geli\u015ftirme<\/strong>:<br>Butonlar\u0131n yan\u0131na veya \u00fcst\u00fcne ekstra bir simge ekleyerek butonlar\u0131 daha g\u00f6rsel olarak zenginle\u015ftirmek istiyorsan\u0131z:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.button:before {\n  content: url(simge.png);\n  margin-right: 0.5em; \/* \u0130kon ile metin aras\u0131ndaki bo\u015fluk *\/\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"4\">\n<li><strong>Form Giri\u015flerine Ek Bilgi Ekleme<\/strong>:<br>Form giri\u015flerinin yan\u0131na ek bir bilgi eklemek istiyorsan\u0131z:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>input&#91;type=\"text\"]:after {\n  content: \"Bu alan gereklidir\";\n  color: red;\n  margin-left: 0.5em; \/* Metin ile giri\u015f alan\u0131 aras\u0131ndaki bo\u015fluk *\/\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\" start=\"5\">\n<li><strong>S\u00fcslemeler \u0130\u00e7in Arka Plan Ekleme<\/strong>:<br>Belirli bir \u00f6geye arka plan resmi eklemek istiyorsan\u0131z:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.ornek-oge:before {\n  content: \"\";\n  background-image: url(arka-plan-resmi.jpg);\n  background-size: cover;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: -1; \/* \u00d6genin arkas\u0131nda olmas\u0131n\u0131 sa\u011flar *\/\n}<\/code><\/pre>\n\n\n\n<p>Bu senaryolar, CSS&#8217;de before ve after se\u00e7icilerinin farkl\u0131 kullan\u0131mlar\u0131n\u0131 g\u00f6stermektedir. Bu se\u00e7iciler, HTML ve CSS&#8217;i daha esnek ve zengin bir deneyim sunmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Desteklenen medya \u00f6geleri<\/h2>\n\n\n\n<p><code>::before<\/code> ve <code>::after<\/code> se\u00e7icileri SVG dosyalar\u0131 destekler. SVG (Scalable Vector Graphics), vekt\u00f6r grafiklerin tan\u0131mlanmas\u0131 i\u00e7in XML tabanl\u0131 bir dosya format\u0131d\u0131r ve web tasar\u0131m\u0131nda yayg\u0131n olarak kullan\u0131l\u0131r. Bu dosya format\u0131, CSS ile kolayca stilize edilebilir.<\/p>\n\n\n\n<p><code>::before<\/code> ve <code>::after<\/code> se\u00e7icileri, CSS&#8217;de herhangi bir i\u00e7eri\u011fi eklemek i\u00e7in kullan\u0131labilir. Bu i\u00e7erik metin, resim, arka plan rengi veya SVG gibi medya \u00f6geleri olabilir. Dolay\u0131s\u0131yla, SVG dosyalar\u0131 da bu se\u00e7icilerle kullan\u0131labilir.<\/p>\n\n\n\n<p>SVG dosyalar\u0131n\u0131n yan\u0131 s\u0131ra, <code>::before<\/code> ve <code>::after<\/code> se\u00e7icileri ile genellikle kullan\u0131lan di\u011fer medya \u00f6geleri \u015funlard\u0131r:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Metin<\/strong>: \u00d6zel bir metin eklemek i\u00e7in kullan\u0131labilir.<\/li>\n\n\n\n<li><strong>\u0130kon fontlar\u0131<\/strong>: Font ikonlar\u0131n\u0131 g\u00f6stermek i\u00e7in kullan\u0131labilir.<\/li>\n\n\n\n<li><strong>CSS3 grafikler<\/strong>: CSS3 \u00f6zellikleri ile olu\u015fturulan grafikler, \u00f6rne\u011fin daire, dikd\u00f6rtgen vb.<\/li>\n\n\n\n<li><strong>Veri URL&#8217;leri<\/strong>: Resim veya di\u011fer medya \u00f6gelerini i\u00e7eren veri URL&#8217;leri de kullan\u0131labilir.<\/li>\n<\/ul>\n\n\n\n<p>Bu medya \u00f6geleri, <code>content<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla <code>::before<\/code> ve <code>::after<\/code> se\u00e7icileriyle eklenir. \u00d6rne\u011fin:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.element::before {\n    content: url('image.svg'); \/* SVG dosyas\u0131n\u0131 eklemek *\/\n}<\/code><\/pre>\n\n\n\n<p>veya<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.element::after {\n    content: \"\\e001\"; \/* \u0130kon fontunu eklemek *\/\n    font-family: 'FontName';\n}<\/code><\/pre>\n\n\n\n<p>Bu \u00f6rneklerde g\u00f6sterildi\u011fi gibi, SVG dosyalar\u0131n\u0131 veya di\u011fer medya \u00f6gelerini eklerken, <code>content<\/code> \u00f6zelli\u011fi i\u00e7inde URL veya karakter kodlamas\u0131 kullan\u0131l\u0131r. Bu \u015fekilde, <code>::before<\/code> ve <code>::after<\/code> se\u00e7icileri ile istedi\u011finiz medya \u00f6gelerini ekleyebilirsiniz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kodlar\u0131 nerede uygulayabilirim?<\/h2>\n\n\n\n<p>E\u011fer WordPress kullan\u0131yorsan\u0131z alan ad\u0131n\u0131z\u0131n sonuna &#8220;\/wp-admin\/customize.php ekleyerek \u00f6zelle\u015ftirme sayfas\u0131na gidin. Orada &#8220;Ek CSS&#8221; veya ayarlar\u0131n\u0131z \u0130ngilizce ise &#8220;Additional CSS&#8221; b\u00f6l\u00fcm\u00fcne t\u0131klay\u0131n. Kar\u015f\u0131n\u0131za \u00e7\u0131kan metin edit\u00f6r\u00fc sizlere CSS kodlar\u0131n\u0131z\u0131 yazma alan\u0131 sunar. Yazd\u0131\u011f\u0131n\u0131z kodlar\u0131 burada test ederek uygulayabilirsiniz.<\/p>\n\n\n\n<p>E\u011fer VS Code&#8217;da \u00e7al\u0131\u015f\u0131yorsan\u0131z, HTML sayfan\u0131zda &lt;style> etiketi olu\u015fturup CSS kodlar\u0131n\u0131z\u0131 buraya yazabilirsiniz. Ya da ayr\u0131 bir CSS dosyas\u0131 olu\u015fturarak (\u00f6rne\u011fin: style.css) HTML sayfan\u0131za ba\u011flayabilirsiniz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS&#8217;in g\u00fc\u00e7l\u00fc ara\u00e7lar\u0131ndan biri olan ::before ve ::after se\u00e7icileri, web tasar\u0131m\u0131nda benzersiz ve g\u00f6rsel olarak \u00e7ekici i\u00e7erikler olu\u015fturman\u0131n harika bir yoludur. Bu se\u00e7iciler, HTML elementlerinin ba\u015flang\u0131c\u0131na ve sonuna dinamik olarak i\u00e7erik eklemenize olanak tan\u0131r, bu da sayfan\u0131z\u0131 canland\u0131r\u0131r ve daha etkileyici bir g\u00f6r\u00fcn\u00fcm sa\u011flar. Peki CSS ile before ve after se\u00e7icileri nas\u0131l kullan\u0131l\u0131r? Bir \u00f6rnek [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[23],"class_list":["post-293","post","type-post","status-publish","format-standard","hentry","category-blog","tag-css"],"_links":{"self":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/comments?post=293"}],"version-history":[{"count":2,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/293\/revisions"}],"predecessor-version":[{"id":301,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/posts\/293\/revisions\/301"}],"wp:attachment":[{"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/media?parent=293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/categories?post=293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudosdigital.com\/tr\/wp-json\/wp\/v2\/tags?post=293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}