CSS放在名称的圆圈第一个字母中

Question

我正在制作一个网站,我已经在那里存储了一些联系人,我接近非常联系人的名字我想要得到第一个字母ot那个名字,并把它放在附近的圆形板上,如上图所示:

有可能用CSS制作吗？

我尝试用字母类伪元素,但它没有为我工作,任何建议？

Answer 1

由于您存储了这些名称,因此当您提取它们时,您也可以提取每个单词/名称的第一个字母并将它们存储在数据属性中.

它比CSS更像是服务器端(或javascript)的工作.

以伪为例:

[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 -->