HTML: <ul> Liste mit andersfarbigen oder größeren Listen-Punkten

Um die Listen-Punkte oder Bullet-Points einer <ul> Liste einzufärben, muss man auch die Textfarbe der Liste ändern. Möchte man dies nicht, kann man mit CSS eigene, andersfarbige Listen-Punkte definieren: Mit dem Befehl “li::before” definiert man ein Element, dass vor dem <li> Element angezeigt wird: Dies ist ein Listen-Punkt, dessen Farbe und Größe man per CSS definieren kann.

Damit nicht zwei Bullet-Point Punkte angezeigt werden, muss man die eigentlichen Punkte dann ausblenden: Das geht mit dem Befehl “list-style: none;” in dem <ul> Element:

<ul style=”list-style: none;”>

Um dann einen eigenen, orangenen Listen-Punkt zu zeigen, hilft dieser Code: Er erzeugt mit “\2022” ein rundes Element, dessen Farbe, Größe und Position vor dem dem <li> Element. Dies ist der CSS Code, um einen eigene, farbigen Bullet-Point zu erstellen:

<style>
#liste li::before {
content: “\2022″;
color: #ff9c27;
font-weight: bold;
font-size:38px;
display: inline-block;
width: 0.5em;
margin-left: -0.5em;
margin-top: -1em;
position:relative;
top:9px;
left:-3px;
}
</style>

<ul id=”liste” style=”list-style: none;”>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3v/li>
</ul>

 
Und so sieht es aus:

• Punkt 1
• Punkt 2
• Punkt 3