CSS'de Listelerin Madde Ä°ÅŸaretini DeÄŸiÅŸtirme

HTML listelerinde, her liste öğesi için madde işaretleri veya bir tür 'simge' bulunur. Bu, normal içerikten öne çıkmalarına yardımcı olur, ancak yerleşik seçenekler oldukça sıradandır.

Şu anda, sıralı olmayan bir listede madde işareti noktasının rengini veya şeklini değiştirmenin yerleşik bir yolu yoktur. Ancak, bu değişikliği biraz özel CSS kodları ile gerçekleştirebilirsiniz.

Yapılacak ilk ÅŸey, stilize edilemedikleri için varsayılan madde iÅŸaret noktalarını kaldırmaktır. Bu nedenle, listenin list-style özellik deÄŸerini none olarak ayarlıyoruz. Åžimdi , li::before seçicisini kullanarak liste öğesinden önce bir Unicode madde iÅŸareti noktası eklemek gerekiyor. content deÄŸerini bir madde iÅŸareti noktasının Unicode kodu olan "\ 2022" olarak ayarlayacağız .

Madde iÅŸareti rengini deÄŸiÅŸtirme

HTML: Temel bir liste oluÅŸrurun.

<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>PHP</li>
 <li>JAVASCRÄ°PT</li>
</ul>

Varsayılan olarak, bir liste öğesinin madde işareti rengini değiştirmek mümkün değildir. Ancak, bunu mümkün kılmak için bazı CSS Teknikleri kullanabilirsiniz. Bir CSS framework veya özel bir stil sayfası kullanıyorsanız, biraz farklı ayar yapmanız gerekebileceğini unutmayın.

ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    content: "•";
    position: absolute;
    left: -1em;
    color: red;
}

ÇIKTI:

Unicode Karakteri Madde Ä°ÅŸareti Olarak Kullanma

Varsayılan tarayıcı madde iÅŸaretlerini kapatılabilir ve bunun yerine CSS ::before sözde öğesini kullanarak bir unicode madde iÅŸareti kullanabilirsiniz.

Herhangi bir unicode karakteri kolayca ekleyebilirsiniz , ancak size kolaylık olması açısından kullanıcı tabanımızla en alakalı olan unicode karakterlerin listesini derledik.

ÖRNEK:

  
  ul {
    list-style: none;
}

li {
    position: relative;
}

li:before {
    content: "\25c6";
    position: absolute;
    left: -1em;
    color: orange;
  
  

HTML:

<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
	<li>JAVASCRÄ°PT</li>
</ol>

ÇIKTI: