Как добавить фрагмент текста в CSS

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем тему «Псевдоэлементы CSS«.

В этой статье я расскажу и покажу, как при помощи псевдоэлементов :after и :before, можно добавить что-то в контент, не внося это «что-то» в html код.

То есть, в html коде этого элемента не будет, но на странице он будет отображаться.

Вся хитрость в том, что в CSS существует технология, позволяющая вносить элемент в таблицу стилей, привязав его к любому селектору, при помощи псевдоэлементов.

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

Тогда достаточно будет изменить его в файле style.css, как изменения произойдут везде где этот элемент присутствует.

В предыдущих статьях мы уже узнали, что что псевдоэлементы :after и :before добавляют стили в начале и в конце элемента.

Вот эти свойства мы и применим.

Для реализации вставки, применяется стилевое свойство content

Код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
.one:after {
    content: "Октябрь 2014"; /* Добавляем после текста абзаца */
	margin-left: 10px;
   }
.one:before {
    content: "\264F"; /* Добавляем символ в юникоде, перед текстом абзаца */
	margin-right: 10px;
	}
.two:after {
    content:"Сегодня всем скорпионам..."
	}
</style>
</head>
<body>
	<p class="one">Гороскоп</p>
	<p class="two"></p>
</body>
</html>

Результат:

85

Как видите, два элемента <p> присутствуют в html коде, а символ, число и содержание абзаца — только в таблице стилей.

Достаточно присвоить классы нужным элементам <p>, или любым другим, на нужных страницах, чтоб затем менять их все в одном месте — таблице стилей.

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

Неужели не осталось вопросов? Спросить

Как сделать страницу с загнутым уголком < < < ◊ > > > Что такое псевдокласс (pseudo-class) CSS

Запись опубликована в рубрике Новости. Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *