Before & After на практике

Привет, дорогие друзья.

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

ДЕМКА

ИСХОДНИКИ

И так, давайте разберем реальный пример. Нам нужно сверстать вот такой простой блок:

before after demo

Как мы видим у нас обычный контейнер с текстом и слева у нас находится треугольник. Кто не работал с псевдоэлементами before и after, скорее всего начали бы делать этот треугольник картинкой. Но все гораздо проще, чем вы думаете.

Вот наш HTML:

    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto atque distinctio dolorem, earum enim error expedita facere inventore maxime molestias neque porro possimus quae quos repellat sed sint ullam unde?
    </div>

Вот наш CSS:

body {
    background: #333;
    font-family: Tahoma;
}

.container {
    width: 300px;
    height: 130px;
    background: #fff;
    margin: 50px auto;
    padding: 20px;
    border-radius: 4px;
    position: relative;
}

С HTML надеюсь вопросов нет. Давайте разберем немного CSS. Сначала назначаем ширину и высоту элемента, далее красим фон в белый цвет, выравниваем элемент по центру по горизонтали и делаем небольшой отступ сверху и снизу. Так же делаем внутренний отступ в 20 пикселей, закругляем края элемента и выставляем относительное позиционирование. Благодаря относительному позиционированию элемента мы сможем с легкостью создать наш треугольничек.

Теперь переходим к десерту. Before и After позволяют нам вставлять какой-либо контент до\после содержимого любого элемента. Сделайте вот так: добавьте вот такие стили после стилей элемента с классом .container

.container:before {
    content: 'Я текст ДО элемента';
}
.container:after {
    content: 'Я текст ПОСЛЕ элемента';
}

В свойстве content: »; пишем любой текст, который хотите отобразить до\после элемента. Это особенность этих псевдоэлементов, без этого свойства у Вас ничего не получится.

Так а как же сделать треугольник? Можно ли вставлять изображение в свойство content? Нет, нельзя. Чтобы Вас не путать, вот вам готовый CSS для создания такого треугольника, давайте его разберем.

.container:after {
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #fff;
    position: absolute;
    top: 20px;
    left: -20px;
}

Как мы видим у нас есть свойство content, но мы его оставили пустым. Далее свойствами border мы создаем сам треугольник. Как делать разные треугольники при помощи CSS читайте статью: треугольники на css. Позиционируем все это абсолютно относительно нашего элемента container и свойствами top, right, bottom, left выставляем треугольник там, где нам нужно. В нашем случае треугольник слева и вверху.

Давайте сделаем треугольник справа сверху. Для этого пишем такой код:

.container:after {
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #fff;
    position: absolute;
    top: 20px;
    right: -20px;
}

Или например сверху и по центру:

.container:after {
    content: '';
    border: 10px solid transparent;
    border-bottom: 10px solid #fff;
    position: absolute;
    top: -20px;
    right: 47%;
}

Вот так вот, все очень просто. Мы так же можем сделать два треугольника, ведь у нас два псевдоэлемента.

.container:after {
    content: '';
    border: 10px solid transparent;
    border-bottom: 10px solid #fff;
    position: absolute;
    top: -20px;
    right: 47%;
}

.container:before {
   content: '';
   border: 10px solid transparent;
   border-top: 10px solid #fff;
   position: absolute;
   bottom: -20px;
   right: 47%;
}

Кстати, если Вам нужен всего один треугольничек, то неважно будете ли вы использовать before или after. Здесь уже дело вкуса. Мне например больше нравится использовать after.

Пробуйте, экспериментируйте.

И давайте разберем еще один простой пример. Например нам надо сделать вот такую полоску над или под элементом.
before after demo

Задача вроде бы простая, но без before и after довольно неприятная.

Решается все просто.

HTML:

    <h1>Я большой заголовок</h1>

CSS:

h1 {
    color: #fff;
    text-align: center;
}

h1:before {
    content: '';
    width: 130px;
    height: 4px;
    background: #f56416;
    margin: 0 auto;
    display: block;
}

Опять же content пустой. Создаем элемент шириной в 130 пикселей и 4 пикселя в высоту. Красим в красный цвет, делаем элемент блочным и выравниваем по центру. Здесь мы обошлись без позиционирования.

О том как создавать различные треугольники читайте статью: треугольники на css

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

Комменты

  • Познавательно.
    Спасибо)

  • Спасибо, не думал что так просто, молодец, что поделился.

  • Рад новым статьям на Вашем сайте! С интересом почитаю! Только вчера думал, — что-то Дмитрий давно не давал о себе знать, а сегодня, вот, уже, и новые новости, как всегда очень полезные и занимательные! Спасибо!

    • Дмитрий Валак: 22-04-2014 в 18:50

      Да, давно ничего не писал, не записывал видео. Буду возвращаться в форму)