Як правильно вставити after і :before

_{Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року.} ^{29-11-2015, 14:00 1 534 0}

Псевдоелементи :after і :before застосовується для відображення бажаного контенту до або після вмісту елемента, до якого він додається. Працює спільно з властивістю content.

Псевдоелементи задають стиль для елементів не існуючих в дереві елементів документа і створюють текстовий вміст, якого немає у вихідному коді.

Псевдоелементи з'явилися ще в рекомендації CSS1, однак :before :after, мова про яких піде далі були випущені в CSS2.1. Що стосується синтаксису:

Врахуйте, що для :afte і :before  успадковується стиль від елемента, до якого вони додаються.

Види псевдоелементів:

Те що нам потрібно вставити після, пишемо в лапках замість слова тут. Приклад:

strong:after { content: "тут"; }

В лапки можна код символа,  код шрифтової іконки, - деталі тут

Також можна через content вставити блок чи картинку, дивись нижче:

h1:before  {
    float:left;
    margin-top:-10px;
    content: "";
    display: block;
    background: url(../images/fon.png) -313px -439px no-repeat;
    height: 48px;
    width:65px;
}

Також можна вставити закриваючі і відкриваючі лапки:

<style type="text/css">
b { quotes: "\ab" "\bb"; } /* визначає вид лапок */
b:before { content: open-quote; }
b:hover:before { content: no-open-quote; } /* відміняє відкриваючу лапку */
b:after { content: close-quote; }
b:hover:after { content: no-close-quote; } /* відміняє закриваючу лапку */
</style>

Псевдоелементи можна використовувати і для тексту, наприклад:

1. Виділяємо в тексті елемента "р" першу літеру червоним кольором:

p:first-letter{color: red;}

2.Виділяємо в тексті елемента "р" першу стірчку червоним кольором:

p:first-line{color: red;}

3. При виділенні тексту замальовуємо його червоним кольором:

p::selection{background: red;}
p::-moz-selection{background: red;}

Коментарі