Псевдо-элемент CSS что это такое

Здравствуйте уважаемые начинающие веб-мастера. Название псевдо-элементы CSS, говорит само за себя.

Этих элементов нет в html коде, но их действие отображается на странице.

Псевдо-элементы прописываются только в таблице стилей. И этим как бы элементам, можно задать стили, то есть сделать оформление, которое появится на экране.

Более того, при помощи псевдо-элементов можно добавлять отрывки текста, к уже имеющемуся, прямо в таблице стилей.

Это очень удобно, когда для определённых параграфов или абзацев сайта, нужно сделать небольшую сноску.

Для этого достаточно задать им класс, а затем в таблице стилей, в селектор этого класса добавить псевдо-элемент, и написать текст, который затем появится во всех абзацах.

Псевдо-элемент не существует сам по себе. Он всегда привязан к, уже имеющемуся в html коде, элементу.

К одному элементу, можно привязать несколько псевдо-элементов.

Синтаксис написания: селектор элемента — двоеточие — название псевдо-элемента, стили задаются как обычно, в фигурных скобках.

p : псевдо-элемент{
свойство: значение;
}

К сожалению, в CSS всего четыре псевдо-элемента. Это:

1. :after — Добавляет стилевое оформление и текст в конце элемента. работает со стилевым свойством content.

2. :before — Добавляет стилевое оформление в начале элемента.

3. :first-letter — Добавляет стилевое оформление к первому символу текста элемента.

4. :first-line — Добавляет стилевое оформление первой строки текста элемента.

Несмотря на ограниченное количество, при помощи этих псевдо-элементов, можно получить очень оригинальные эффекты.

Это загнутые уголки страниц, изогнутые блоки, красивые заглавные буквы для абзацев, и кое-что ещё.

В следующих статьях, мы подробно рассмотрим, как сделать некоторые из них.

Желаю творческих успехов.

Перемена

-Доктор, я разговариваю с кошкой. Это паранойя?
-Нет. Паранойя — это когда при кошке боишься сказать лишнего.

Фиксированное позиционирование < < < В раздел > > > Как сделать красивую заглавную букву CSS