CSS место в круге первая буква имени

Я делаю сайты, я сохранил некоторые контакты там, и я почти с самым контактным именем, я пытаюсь получить первую букву от этого имени и поместить ее в кругную доску рядом с ней, как на изображении выше:

это можно сделать с помощью CSS?

Я пробовал его с псевдоэлементом класса letter, но он не работал для меня, никаких предложений?

Ответы

Ответ 1

Поскольку вы сохранили эти имена, то при их извлечении вы также можете извлечь первую букву каждого слова/имени и сохранить их в атрибуте data-.

Это скорее работа на стороне сервера (или javascript), чем CSS.

например, псевдо:

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

Ответ 2

Это не может быть сделано ТОЛЬКО с CSS, вам нужно хотя бы немного модифицировать HTML (или использовать JS), позвольте мне объяснить:

HTML, добавив атрибут title:

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

CSS:

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

Но только с помощью CSS вы не можете иметь первые буквы из текстового узла элемента и помещать его в свойство контента.

Если вы не можете изменить HTML, вам придется использовать JS-решение.

Ответ 3

Я предположил, что у вас есть доступ к первому имени и фамилии. Используя это, я написал этот код, который берет первую букву от имени и фамилии и относится к вашему профилю.

$(document).ready(function(){
  var firstName = $('#firstName').text();
  var lastName = $('#lastName').text();
  var intials = $('#firstName').text().charAt(0) + $('#lastName').text().charAt(0);
  var profileImage = $('#profileImage').text(intials);
});



#profileImage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #512DA8;
  font-size: 35px;
  color: #fff;
  text-align: center;
  line-height: 150px;
  margin: 20px 0;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span id="firstName">King</span>
<span id="lastName">Singh</span>
<div id="profileImage"></div>

Ответ 4

Вот еще один способ сделать это, я изменил ссылку, приведенную в комментарии выше, хотя некоторые из предложенных выше ответов довольно коротки. Этот подход очень простой и понятный для начинающих:

$('h1').each(function() {
  var str = $(this).text();
  var matches = str.match(/\b(\w)/g);
  
  var acronym = matches.join('');
  
  $(this).prepend('<span><i>' + acronym + '</i></span>');
  
})

* {
  box-sizing: border-box;
}

h1 {
  font-size: 24px;
  margin: 15px 0;
}

h1 span {
  background: rgba(155, 79, 243, 0.74);
  text-transform: uppercase;
  font-family: "Lucida Console";
  align-items:center;
  color: rgba(233, 236, 237, 0.78);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  font-size: 16px;
  padding: 5px;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
h1 span i{
  width:max-content;
  font-style: normal;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<h1>Morbi metus</h1>
<h1>yorbi fasetus</h1>
<h1>test tessdfa</h1>