Ich mache eine Website wo ich einige Kontakte dort gespeichert habe und ich in der Nähe von sehr Kontakt Name Ich versuche, den ersten Buchstaben des Namen zu bekommen und es in einem Kreis Board in der Nähe davon im Bild oben mag:CSS Platz im Kreis erster Buchstabe des Namens
ist es möglich, es mit CSS zu machen?
Ich versuche es mit Briefklasse Pseudoelement, aber es hat nicht für mich, irgendwelche Vorschläge gearbeitet?
Da Sie diese Namen gespeichert haben, können Sie, wenn Sie sie extrahieren, auch den ersten Buchstaben jedes Wortes/Namens extrahieren und in einem data- attribute speichern.
Es ist eine serverseitige (oder Javascript) Job als CSS.
exemple mit pseudo:
[data-letters]:before {
content:attr(data-letters);
display:inline-block;
font-size:1em;
width:2.5em;
height:2.5em;
line-height:2.5em;
text-align:center;
border-radius:50%;
background:plum;
vertical-align:middle;
margin-right:1em;
color:white;
}<p data-letters="MN"> My Name</p><!-- or whatever structure you used -->Wie kann ich dann den ersten Buchstaben mit Javascript bekommen? – pureofpure
Dies kann nicht nur mit CSS gemacht werden, werden Sie einige HTML mindestens (oder verwenden Sie JS) ändern müssen, lassen Sie mich erklären:
HTML, ein Titel Attribut hinzufügen:
<div class="my-circle" title="KM"></div>
<div class="name">Kwstas Mixopoulos</div>
CSS:
.my-circle {
content: attr(title);
}
Aber nur mit CSS, können Sie nicht die ersten Buchstaben von einem Element Textknoten haben und es in einen Inhalt setzen Eigentum.
Wenn Sie HTML nicht ändern können, müssen Sie eine JS-basierte Lösung verwenden.
Sie müssen die ersten Buchstaben durch JavaScript bekommen und es dann mit CSS-Stil. –
Das Erstellen des Kreises selbst kann mit CSS erfolgen, aber das Abrufen des ersten Buchstabens vom Vor- und Nachnamen kann nicht erfolgen. Sie sollten etwas wie jQuery verwenden, um die ersten Buchstaben automatisch auszuwählen und damit zu wackeln. – ProDexorite
benötigen Sie einige 'JS' http://jsfiddle.net/82Ebt/80/ –