На недавнем W3Conf объяснили, что хотя pseudo-элементы помогли нам добавить декоративное содержание наших страниц, сохраняя при этом наш HTML чистым, но они привели к некоторым вопросам. Инструменты разработчика могут в некоторой степени помочь отследить элементы, но часто динамически добавляемый контент, например, pseudo-элементы или дополнительные элементы, добавленные с помощью JavaScript, изначально отследить куда сложнее. Допустим, у нас есть следующие HTML и CSS (с pseudo-элементами):
HTML:
<div class="exampleModule"> <p>content...</p> </div>
CSS:
.exampleModule { float: left; border: solid 2px #ccc; position: relative; } .exampleModule:before { content: url(icon.png); float: left; } .exampleModule:after { content: url(corner.png); position: absolute; bottom: 0; right: 0; }
В результате мы получим <div>, содержащий параграф и 2 декоративные картинки: до и после параграфа. Когда мы будем просматривать наш HTML код, мы не сможем сразу увидеть изменения в HTML. Придется лезть в CSSи анализировать классы элементов. Чтобы было легче ориентироваться, лучше использовать в верстке комментарии:
<div class="exampleModule"> <!-- pseudo: icon.png --> <p>content...</p> <!-- pseudo: corner.png --> </div>
Теперь вам не придется просматривать CSS или инспектировать элемент с помощью средств разработки. Теперь, как только вы посмотрите на HTML, вы сразу увидите элементы (в данном случае два изображения), добавленные с помощью pseudo-элементов. Так наглядней, правда? Аналогично этот же принцип может быть применен к контенту, который вводится с помощью JavaScript.
Спасибо за внимание!