Css позиционирование псевдоэлемента в начале div - PullRequest
Новая
       8

Css позиционирование псевдоэлемента в начале div

0 голосов
/ 09 апреля 2020

Я хочу расположить этот псевдоэлемент в начале ячейки, как показано на рисунке.
enter image description here

Но это зависит от числа, которое я использую ниже css для достижения этого 

.warning-div:before
  { 
    content: " \26A0";
    position: relative;
    left: -56px;
    top: 1px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    cursor: pointer; 
  }

Сбой при изменении длины номера, как показано ниже
enter image description here enter image description here

HTMl: это обычный тег. 

<td class="warning-div">7,900</td>

Кто-нибудь может указать на основные принципы, которые я здесь упускаю, чтобы всегда получать значок в начале.

Любая помощь будет оценена

Ответы [ 2 ]

1 голос
/ 09 апреля 2020

Вы можете использовать justify-content:space-between;, это будет пробел между обоими элементами с надлежащим расстоянием. 

.warning-div {
  background: red;
  width: 100px;
  text-align: right;
  padding: 5px 10px;
  display:flex;
  justify-content: space-between;
}

.warning-div:before {
  content: " \26A0";
  left: 5px;
  top: 1px;
  font-weight: bold;
  cursor: pointer;
  font-size: 16px;
  cursor: pointer;
}
<div class="warning-div">
  7000000
</div>
1 голос
/ 09 апреля 2020

Вам необходимо позиционировать абсолютное значение для псевдоэлемента и положение: относительно родительского элемента. Надеюсь, это то, что вам нужно. 

.warning-div{
  background:red;
  width:100px;
  text-align:right;
  position:relative;
  padding:5px 10px;
}
.warning-div:before
  { 
    content: " \26A0";
    position: absolute;
    left: 5px;
    top: 1px;
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    cursor: pointer; 
  }
<div class="warning-div">
7000
</div>
...