Блог веб разработки

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

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>

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

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

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

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

Еще статьи

капча php

svg html

входные данные PHP

tkinter создание окна

Маски css

SQL html

память выделяемая php

python pyperclip

linux systemd

Комментарии

Проверочный код

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

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

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