htmlcsspseudo-element

Icon shrinks when the text wraps. (Pseudo element before)

The icon shrinks when the text wraps and becomes smaller than the 36px specified in CSS. Example

The icon is included using the "before" pseudo-element.

Any idea why this happens and how to fix it?

The syntax is as follows:

.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;
}
<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This is a smaller text.
  </div>
</div>

<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    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.
  </div>
</div>

Solution 

  • .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;
  flex-shrink : 0;

}
    <div class="row">
  <div data-initials="A" class="col-md-6 initial">
    This is a smaller text.
  </div>
</div>

<div class="row">
  <div data-initials="A" class="col-md-6 initial">
    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.
  </div>
</div>