Das Symbol schrumpft, wenn der Text abwickelt. (Pseudoelement vorher) ⇐ CSS

[Anonymous]

Das Symbol schrumpft, wenn der Text umschließt und kleiner als der in CSS angegebene 36px. Dies geschieht und wie man es behebt?

Code: Select all

.initial {
align-items: center;
display: flex;
font-size: 12px;
margin: 10px 0px 10px 0px;
}

.initial::before {
content: attr(data-initials);
align-items: center;
display: flex;
justify-content: center;
background-color: #111111;
border-radius: 100% 100% 100% 100%;
color: #ffffff;
height: 36px;
letter-spacing: 1px;
line-height: 12px;
margin-right: 10px;
text-transform: uppercase;
width: 36px;
}< /code>


This is a smaller text.




This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text. This ist a very long text.