[ERLEDIGT] Neue Nachrichten - Symbol

[Gykonik]

Hey Leute, ich bins nochmal mit einer Frage zu CSS...

Nehmen wir mal an man hat ein Nachrichtensystem und möchte dann anzeigen, dass der User X neue Nachrichten hat. Wie man das so von Google, YouTube und (ich glaube) auch hier kennt ist meist ein z.B. roter Kreis mit drinnen die Zahl der neuen Nachrichten, oder falls zu groß 99+ oder sowas...

Mein Ansatz war folgender:
Ich werte natürlich erstmal mit PHP aus, wie viele Nachrichten der User bekommen hat und schreibe es dann in einen Span Tag, um einen Div erhum. Dabei bekommt der Div den Stil des Kreies, also:

<div id="kreis">
   <span id="AnzahlNachrichten">
      X
   </span>
</div>

Und zu CSS-Kreisen habe ich z.B. sowas gefunden:

#kreis {
    background-color: green;
    position: absolute;
    width: 200px;
    height: 200px;
    top: 100px;
    left: 250px;
    border: 1px solid black;
    text-align: center;
    border-radius: 100px;
}

Mir ist bewusst, dass der Kreis oben eine feste Größe hat und so auch der border-radius einfach bestimmt werden kann, etc...
Jedoch ist mein Ziel, dass sich der Kreis irgendwie anpasst an die Nachrichtenanzahl (1/2 Stellig), da ich denke, dass es so bei den ganzen Websites gemacht ist...

Hat jemand eine Idee/bessere Lösung/Link die/der mir hilft?
Wäre sehr Lieb...
Hoffe man versteht mein Anliegen :s[/HTML]

 

[SpiceLab]

Mittels Google gefunden: https://jsfiddle.net/ThinkingStiff/mLW47/

 

[Gykonik]

Wenn ich fragen darf, unter was hast du gegooglet? Ist perfekt, aber wieso hab ich das nicht gefunden? :/

 

[SpiceLab]

css circle with text (aktuell das 6. Suchergebnis)

 

[Gykonik]

Mhh, ja gut...
Kam nicht auf die Idee mit dem "with text" *schäm*

Danke aufjedenfall