CSSの名前の最初の文字の円で

Question

私はそこにいくつかの連絡先を保存していた私は と私は非常に連絡先の名前の近くに私はその 名前を取得し、それに近い上の画像のように：

CSSでそれを行うことが可能ですか？

私はレタークラスの疑似要素で試してみましたが、それは私のために働いていませんでした 提案はありますか？

Answer 1

これらの名前を保存したので、それらを抽出すると、各単語/名前の最初の文字を抽出して、data- attributeに保存することもできます。

これは、CSSよりもサーバー側（またはjavascript）のジョブです。擬似と

exemple：

[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

これはCSSで行うことができない、あなたは、少なくともいくつかのHTMLを変更する（またはJSを使用）する必要があります、私が説明しましょう：tit​​le属性を追加すること

HTML、：

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

CSS：

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

しかし、唯一のCSSで、あなたは要素のテキストノードからの最初の文字を持つことができないと、コンテンツに入れてプロパティ。

HTMLを変更できない場合は、JSベースのソリューションを使用する必要があります。