Задать вопрос
@MBodunov
html

Как в блоке поставить слева от текста символ?

С помощью css выделяю блок текста
5f313eeb3a12f492090947.jpeg
Для чего использую простой код:
.line-4 {
    border-left: 4px dashed red; /* Параметры линии */ 
    padding-left: 10px; /* Расстояние от линии до текста */ 
    border-left-style: dashed;
    padding-left: 8px;
    margin-left: -11px;    
}

<a href="/advert/polucheno-izmenenie--3-toma-1-svodnogo-perechnya-dokumentov.html">
   <p class="line-4">Получено изменение № 3 Тома 1 Сводного перечня документов</p>
</a>

В зависимости от размеров текста меняется и размер линии слева.
Мне нужно заменить линию на восклицательный знак (!)
Причём он тоже должен менять свою высоту, в зависимости от количество строк в тексте.
Подскажите, как это можно сделать с помощью css
Спасибо
  • Вопрос задан
  • 388 просмотров
Комментировать
Подписаться 1 Средний Комментировать
Ответ пользователя Pavstyuk К ответам на вопрос (3)
@Pavstyuk
Я бы сделал примерно так. Где sign.svg картинка восклицательный знак в формате svg. Вопрос в подгонке размеров и позиционирования псевдоэлемента :before уже по месту. 
.line-4 {
    position: reletive;
    padding: 0 0 0 10px;
    margin: 0 0 0 30px;
}

.line-4:before {
    position: absolute;
    content: "";
    top: 0;
    left: -30px;
    width: 30px;
    height: 100%;
    background: url("/path/to/sign.svg") 50% 50% no-repeat;
    background-size: contain;
}
Ответ написан
Комментировать
Комментировать