@MBodunov

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

С помощью 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
Спасибо
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ответы на вопрос 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;
}
Ответ написан
Spartak-2205
@Spartak-2205
Разработка и создание сайтов
Использовать Псевдоэлемент :before
Ответ написан
@MBodunov Автор вопроса
Пробывал через 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(data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class=…5a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/></svg>) 50% 50% no-repeat;
    background-size: contain;
}

То просто текст в блоках смещеется влево ничего не отображая.
если чуть модифицировать
.line-5:before {
    position: absolute;
    content: "!";
    top: 0;
    left: -30px;
    width: 30px;
    height: 100%;
}

То появляется один маленький знак ! , хотя блоков с классом несколько
И соответсвенно нужно, что бы он появлялся у каждого
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы