Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

CSS before after

CSS before after

Всем доброго времени суток и давайте рассмотрим следующий пример

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Псевдоселекторы :before и :after</title>
</head>
    <body>
        <style>
            .string p:before{
                Content:'Начало строки | ';
            }
            .string p:after{
                Content:'| Конец строки';
            }
        </style>
       <div class="string">
            <p>Строка 1</p>
            <p>Строка 2</p>
            <p>Строка 3</p>
            <p>Строка 4</p>
            <p>Строка 5</p>
       </div>
    </body>
</html>

как видите в примере у нас заданы пять строк к которым в стилях мы применили псевдоселекторы :before и :after.

:before - позволяет вставляет элемент перед контентом.

:after - вставляет элемент после контента

Также следует понимать что для того чтобы вставить контент с помощью :before и :after нам необходимо указать свойство Content в котором следовательно у указывается сам контент. Если мы заглянем в исходный код страницы, то мы не увидим добавляемый контент вместо него будут указываться наши псевдоселекторы.

Мы можем вставляемым элементам также задавать свойства к примеру:

<style>
     .string p:before{
         Content:'Начало строки | ';
         font-weight:bold;
     }
     .string p:after{
         Content:'| Конец строки';
         opacity:0.5;
     }
 </style>
<div class="string">
     <p>Строка 1</p>
     <p>Строка 2</p>
     <p>Строка 3</p>
     <p>Строка 4</p>
     <p>Строка 5</p>
</div>

здесь элементам добавляемым в начале, мы указали свойство bold в результате чего текст стал жирным , а элементам вставляемым после свойство opacity изменяя прозрачность на 50%;

Пользуясь данными псевдоселекторами мы можем создавать очень интересные эффекты к примеру.

<style>

button:hover{
    color:rgba(0,0,0,0);
}
        button:hover:before{
          padding-left:33px;
            Content:"Нажми на меня";
            color:rgba(0,0,0,1);

        }

    </style>

      <button>Кнопка</button>

здесь у нас есть кнопка при наведении прозрачность ее текста меняется на ноль , то есть текст становится невидимым, однако мы также с помощью псевдоселектора :before добавляем текст с прозрачностью 1 и делаем небольшой отсуп слева для симметрии в результате чего у нас происходить визуальная подмена текста. Вот на таком примере я хочу показать вам как вы можете играться с контентом с помощью CSS.

Бонусом к данной статье пойдет рассмотрение псевдоселектора first-letter

<style>
    p:first-letter{
    font-weight: bold;
        font-size:30px;
    }
</style>
<p>текст</p>

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

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

Я желаю вам удачи и всего самого хорошего пока.

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm