Розробка, підтримка, SEO, просування, соцмережі та реклама сайтів ☣
Кабінет клієнта
Зареєструватись Забули пароль?
Створення та оптимізація сайтів » Блог » faq » Як правильно вставити after і :before

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

Створюю і просуваю комерційні сайти та інтернет-магазини з 2008 року. 29-11-2015, 14:00 672 0
Як правильно вставити after і  :before

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

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

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

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

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

Назва Опис
:before застосовується для вставки вмісту перед елементом;
:after застосовується для вставки вмісту після елемента;
::first-letter представляє собою перший символ першого рядка тексту всередині елемента;
::first-line представляє собою першу лінію форматованого тексту;
::selection представляє собою частину документа, яка була виділена мишкою.


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

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;}

 

 

 
 


Коментарі

⤹ Залишити свій коментар ⤸

  • оновити, якщо не видно коду

Тарифні плани

Потужний старт Стандартний запуск сайту від $400
  • - ♜ -
  • В стартовий тарифний план входить:

  • Розробка та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 5 сторінок
  • Ліцензія двигунчика DLE
Просунутий SEO оптимізований сайт від $700
  • - ♚ -
  • В SEO тарифний план входить:

  • Створення та налаштування сайту
  • Семантичне ядро
  • Оптимізація швидкості
  • Наповнення до SEO 10 сторінок
  • Ліцензія двигунчика DLE
  • 5 силок + перелінковка
Імперський винущувач конкурентів від $999
  • - ♛ -
  • В імперський тарифний план входить:

  • Розробка сайту
  • Наповнення до SEO 20 сторінок
  • Повна оптимізація
  • Ліцензія двигунчика DLE
  • МОЄ НАТХНЕННЯ та ДОСВІД!
/* soc-knopki */