Нонче тут

Сейчас 68 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте


:before и :after позволяют добавить содержание с помощью стиля content до и после любого тега.
При этом занимаемое тегом поле растягивается.
Простой пример: необходимо добавить кавычки для цитаты:
blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
} 
open-quote
Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quote.
close-quote
Вставляет закрывающую кавычку.

Стилизация псевдоэлементов


К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.
 
blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  /*цвет шрифта*/   
    background: #ddd;  /*цвет фона*/  
    float: left;  /*обтекание текстом*/  
    position: relative;  /*позиция*/  
    top: 30px;  /*отступ сверху*/  
    border-radius: 25px; /*закругление уголков блока*/   
   display: block; /*при указании высоты или ширины необходимо установить display: block:*/ 
    height: 25px;  /*высота*/  
    width: 25px;  /*ширина*/  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: right;  /*обтекание текстом справа*/  
    position: relative;  
    bottom: 40px;  /*отступ снизу*/  
    border-radius: 25px;  
  display: block;  
    height: 25px;  
    width: 25px;  
}  
Пример использования фона для псевдоэлементов :before и :after

Поддержка браузеров


IE

Opera

Chrome

Firefox

Safari
Internet Explorer 9 Opera 7 и выше Chrome 2 и выше Firefox 1 и выше Safari 1 и выше
Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.