пятница, 30 марта 2018 г.

CSS. Как сделать подчеркивание после заголовка с помощью псевдо класса

Создавать для этого пустой блок не имеет смыла. Это можно реализовать через псевдо класс after.

Пример подчеркивания


index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stick</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h3 class="pseudo">Нарисуем палочку после заголовка</h3>
</body>
</html>

main.css
.pseudo:after {
content: '';
display: block;
background: blue;
width: 300px;
height: 3px;
margin-top: 10px;
}

2 комментария:

  1. Было бы не плохо, если бы вы добавили изображения того о чем ведется речь,тем более когда речь о css, если конечно вы это не для себя заметки оставляете(да и для себя с изображениями куда понятней будет, о чем вы заметку оставили)

    ОтветитьУдалить
    Ответы
    1. Действительно! Добавила фото. Учту ваши пожелания.

      Удалить

Materialize-css. Футер

Сделаем футер и прижмем к низу страницы. Документация: https://materializecss.com/footer.html