Четверг, 25 Октября 2012 15:13

Псевдоэлементы before и after

Written by 
Оцени эту запись
(2 Голоса)

В CSS есть возможность добавлять ко всем элементам псевдоэлементы before и after, содержащие определенный конент.

 

 

  • 1
  • 2
  • 3

 

 

<ul class="pseudo">

<li>1</li>

<li>2</li>

<li>3</li>
 
</ul> 
 
<style>
.pseudo li:before {
content: 'Пункт: ';
color: blue;
}
</style>
 
Но, кроме этого, псевдоэлементы позволяют делать интересные вещи.
Недавно я писала статью о очищении потока при помощи задания псевдоэлементу контейнера свойства clear - Очищение потока методом clear при помощи псевдоэлемента after
 
 
Расскажу и о других возможностях.
 
 
В роли контента псевдоэлементов after и before элемента можно задать значение атрибута этого элемента:
 
 
<a href="#" title="link" class="link_pseudo">Text</a>
<style>
.link_pseudo:after {
content: attr(title);
color: blue;
padding-left: 20px;
}
</style>
 
 

Text

 
 
Кроме того, со свойством content можно использовать свойства content-reset и content-increment:
 
Content-reset - задаем первоначальное значение переменной
 
Content-increment - задает шаг прироста счетчика переменной
 
 
<div class="link_pseudo2">
<a href="#" title="link">Text</a> 
<a href="#" title="link">Text</a> 
<a href="#" title="link">Text</a> 
<a href="#" title="link">Text</a> 
<a href="#" title="link">Text</a></div>
 
<style type="text/css">
.link_pseudo2 a {display: block; width: 100px;}
.link_pseudo2 {counter-reset: index 3;}
.link_pseudo2 a:after {
content: attr(title) counter(index);
color: blue;
padding-left: 20px;
counter-increment: index 2;
}
</style>
 
 
 
 
 
 
Еще в этой категории: « WebKit CSS Transition WebKit Appearance »

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов