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

Question

[MBodunov]

С помощью css выделяю блок текста

Для чего использую простой код:

.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
Спасибо

Answer 1

[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;
}

Answer 2

[Spartak (Web-StyleStudio)]

Использовать Псевдоэлемент :before

Comments

[Spartak (Web-StyleStudio)]

Ошибка в position: reletive, правильно relative

.line-4 {
    position: relative;
    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("https://svgsilh.com/svg_v2/662218.svg") 50% 50% no-repeat;
    background-size: contain;
}

[Spartak (Web-StyleStudio)]

position: relEtive;

Увидели здесь ошибку?

Answer 3

[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%;
}

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

Comments

[Spartak (Web-StyleStudio)]

Если вы знак ! добавляете как текст в content, то играйтесь с font-size
Если как картинку в background то убедитесь что url картинки корректный и необходимо задавать высоту

[Spartak (Web-StyleStudio)]

Ошибка в position: reletive, правильно relative