Почему не отображается ::after?

Question

Нужно сделать такой заголовок:

Линия высотой 3 пикселя, в длину - 80. Решил повесить на псевдоэлемент.

<section class="section services">
    <div class="container">
        <h2 class="title services__title">НАШИ УСЛУГИ</h2>
    </div>
</section>

$branded: #21062a;
.title {
    font-size: 36px;
    font-weight: 400;
    line-height: 53px;
    color: $branded;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 50px;
    &::after {
        position: absolute;
        content: "";
        top: 15px;
        margin-left: 10px;
        min-width: 80px;
        min-height: 3px;
        color: $branded;
    }
}

Но в браузере линия не отображается.

Свойство content прописал, если наполнить его текстом, то текст отображается.

В чем моя ошибка?

Answer 1

Попробовал по старинке прописать, значения не менял..

UPD: Есть CSS - каскадная стилистическая таблица. Её понимают браузеры.. Есть SASS, LESS, STYLUS и.т.д - Это препроцессоры. Их необходимо компилировать. Если ваш код скомпилировать к примеру на sassmeister то он выдаст тот же результат, что написан у меня на CSS. Таким образом Sass-Scss это некая среда с плюшками для удобства написания больших css

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

Подробнее документация Sass-Scss

.title {
    font-size: 36px;
    font-weight: 400;
    line-height: 53px;
    color: #21062a;
    text-transform: uppercase;
    position: relative;
    margin-bottom: 50px;
}
.title:after {
        position: absolute;
        content: "";
        top: 15px;
        margin-left: 10px;
        min-width: 80px;
        min-height: 3px;
        background-color: #21062a;
    }

<section class="section services">
    <div class="container">
        <h2 class="title services__title">НАШИ УСЛУГИ</h2>
    </div>
</section>

БЛОГ НА HUSL

Почему не отображается ::after?

Ответы (1 шт):