CSS miejsce w kole pierwsza litera imienia

Question

tworzę strony internetowe, w których zapisałem niektóre kontakty tam i blisko nazwy kontaktu próbuję uzyskać pierwszą literę o tej nazwie i umieścić ją na tablicy obok niego jak w obrazek:

jest to możliwe, aby go z CSS?

Próbuję tego z pseudoelementem klasy literowej, ale nie zadziałało dla mnie, żadnych sugestii?

Answer 1

Po zapisaniu tych nazw, po ich wyodrębnieniu można równie dobrze wyodrębnić pierwszą literę każdego słowa/nazwy i zapisać je w postaci data- attribute.

To jest bardziej zadanie po stronie serwera (lub javascript) niż CSS.

exemple z 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 -->

Answer 2

To nie może być wykonane tylko z CSS, trzeba zmodyfikować niektóre HTML przynajmniej (lub użyć JS), pozwól mi wyjaśnić:

HTML, dodając atrybut Title:

<div class="my-circle" title="KM"></div> 
<div class="name">Kwstas Mixopoulos</div> 

CSS:

.my-circle { 
    content: attr(title); 
} 

Ale tylko z CSS, nie można mieć pierwsze litery od węzła elementu tekstowego i umieścić go w treści własność.

Jeśli nie możesz zmodyfikować HTML, musisz użyć rozwiązania opartego na JS.