Как переместить булма-значок ближе к внутренней части элемента? - PullRequest
Новая
       10

Как переместить булма-значок ближе к внутренней части элемента?

0 голосов
/ 24 февраля 2020

У меня есть значок Bulma, работающий над промежутком внутри тега привязки, но значок находится слишком далеко от внутреннего текста и поэтому обрезается ограничениями родительского элемента. Как вы перемещаете значок ближе к внутреннему тексту элемента? 

<li>
   <a>some text
      <br/>
      <span class="has-badge-rounded" data-badge="42">Some other text</span>
   </a>
</li>

, но это приводит к тому, что значок находится слишком далеко от текста.

1 Ответ

0 голосов
/ 24 февраля 2020

Я не уверен, что это правильный способ сделать это, но я заставил его работать, переопределив псевдо после правила css, прикрепленного к [data-badge]. 

[data-badge]::after {
    min-width: 1rem;
    min-height: 1rem;
    font-size: .75rem;
    top: 0;
    right: 0;
    bottom: auto;
    left: auto;
    transform: translate(0, 0);
}
* 1004 Булмы. значок так далеко от содержимого был transform: translate(50%, -50%), который я изменил на transform: translate(0,0).

У этого есть некоторые побочные эффекты. Значок теперь применяется непосредственно к тегу, к которому относится атрибут data-badge, а не к родительскому тегу. (В моем примере кода значок был над тегом привязки, даже если он был применен к тегу span. Теперь он находится на теге span).

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

...