Css псевдо преди и след това, проучването и прилагането

Ако се занимавате в рамките на изпълнението на разделите с помощта на CSS, забележите на: преди и: след достойни за вниманието на разработчиците. Някои от тях са използвани преди и след, за да създадете красиви връзки, както е показано на снимката по-долу.

Има и други псевдо-елементи, но днес ние ще се съсредоточи върху: преди и: след това. В хода на статията, терминът псевдо-елементи, имаме предвид две от тях (преди и след).

Какво правим псевдо?

Psevdoelementy създаде фалшиви елементи и е поставена в предната част (преди) или след (в) специално съдържание.

Самият префикс "псевдо" показва, че това не е истински елементи. Те не са видими за търсачките се използват само за обработка на съдържанието. Тези елементи са определени в кода на CSS.

Основния синтаксис

Psevdoelementy: преди и: след много предписан в кода. Ето един прост пример за използването:

Важно е да се отбележи, две неща. На първо място, ние се позоваваме на действителната HTML елемент, използвайки струни #example: преди и #example: след това. Префикс, следван от двоеточие, означава, че той не е просто елемент стил, и неговата псевдо.

На второ място, не можете да добавите нещо, без съдържание на собственост. което показва, че тя трябва да се показва като псевдо.

Разширено синтаксис

Можете да оставите празно имота съдържание, както и да създадете блок.

Ако изтриете имота съдържание. псевдо-няма да работи. Най-малко, това sovoystvo трябва да остане празно.

Трябва да сте наясно, че някои от тези елементи се използва под формата :: преди и след ::. Няма никаква разлика, браузъри поддържат този синтаксис.

Друг важен момент на използване. Можете да кандидатствате за всеки от псевдо-HTML елементи.

Но тя се използва за лични цели. Този код вмъква # пред част от съдържанието на всяка DOM елемент. Дори и да се премахнат всички таговете на страницата, можете да видите два знака на страница ##. Той се използва, не знам защо, но това е.

Особености щепселни съдържание

Както бе споменато по-рано, съдържание, което е поставена е невидима за HTML страницата. Това се вижда само в CSS.

Също така, съдържанието на приставка да бъде вградени елементи по подразбиране. За да си точка дисплей блок достатъчно: блок. определите ширината и височината на уреда. Това е много удобно, когато създавате раздели, бутони и т.н.

Важно е да се отбележи, че псевдо-стилове не наследяват от техните елементи майки (като вътрешните и външните граници на). Ето защо, за всеки псевдо, трябва да определите параметрите на стилове.

Поставете не само текстово съдържание

Съдържанието на собственост. Не е нужно да е текст може да бъде и картина. Можете да се регистрирате на URL адреса на изображението, както се прави във фонов режим.

Важно е да се помни, че адреса не може да бъде цитиран, това би означавало, че съдържанието е текст.

Кои браузъри поддържат на: преди и: след?

Особено в последно време, че е важно при проектирането на съвместимост различни браузъри. Ето защо, преди използването на всеки метод, трябва да го проверите в различни браузъри. По-долу е даден списък с браузъри, които поддържат на: преди и: след това.

Firefox 3.5+ (3.0 има частична подкрепа)

IE8 + (С незначителни бъгове),

Както и много други мобилни браузъри.

Има само един проблем (надявам се това не е новина за вас) IE6 и IE7, които не поддържат псевдо. Ако вашата потребителска база използва браузърите трябва да страдат или просто да им предложи да обновите вашия браузър.

Както можете да видите използването на преди и след псевдо-елементи не е толкова критична, тъй като много представяла. Това е всичко, аз ви пожелавам успех!