css after content – новые применения

after content для оформления контента не обязательного к индексации

В css 2 появился замечательный псевдоэлемент, а вернее целых два: :after и :before. Кому-то они могут показаться мало интересными, но я сейчас попробую представить несколько нестандартных способов их использования, которые могут вам пригодиться.

Порой на странице приходиться выводить множество служебной информации, которая не имеет никакого отношения к содержанию, но должна быть видна пользователю. Попадание этой информации не всегда желательно в поисковый индекс. Недавно я столкнулся с такой ситуацией, и меня выручило css-свойство :after.

На одном хорошем сайте, поддержкой и развитием которого я занимаюсь в свободное от работы время, есть гостевая книга. Порой, кроме пожеланий и отзывов, пользователи задают вопросы, на которые приходиться отвечать. Для этого у меня предусмотрен стиль для параграфа, содержащего мой ответ, он вбивается после сообщения в гостевой. Разумеется мне приходиться подписываться под такими ответами, чтобы пользователь понял, кто ему ответил. Моё имя никаким образом не связано с этим сайтом, в том плане, что я не пиарюсь посредством его, а просто работаю редактором проекта, молча, за символическое вознаграждение и ради удовольствия.

И так, код в студию…

.reply:after {
    content: "С уважением, Николай, редактор сайта";
    font-weight: bold;
}
.reply {
    border: 1px dashed brown;
    margin-left: 20%;
    padding: 3px;
    text-align: right;
    width: 77%;

Как это работает можно увидеть в гостевой казачьего ансамбля. В данном примере с помощью css выводиться подпись “С уважением, Николай, редактор сайта”. Заметьте: к псевдэлементам :after и :before можно применять не только наиболее используемое в данном контексте свойство content, но и все другие, для оформления элемента: сделать их блочными, жирными, задать границы, отступы, фоновое изображение, что угодно!

Ещё один пример полезного использования псевдоэлементов. Все мы часто используем списки. В html, по умолчанию, списки имеют не особо много видов стандартного оформления: кружочки залитые, полые, квадратики и всё. К тому же часто хочется отделить одну строку списка от другой двоеточием. А в начале поставить какую-нибудь закорючку. Или знак пунктуации. Вот, попробуйте этот пример:

<style>
li {list-style: none;}
li:before {content: '§ ';}
li:after {content: ';'}
</style>
<ul>
	<li><a title="Конкурс сео-специалист месяца" href="http://samizdam.net/2011/09/%d0%ba%d0%be%d0%bd%d0%ba%d1%83%d1%80%d1%81-%d1%81%d0%b5%d0%be-%d1%81%d0%bf%d0%b5%d1%86%d0%b8%d0%b0%d0%bb%d0%b8%d1%81%d1%82-%d0%bc%d0%b5%d1%81%d1%8f%d1%86%d0%b0/">Конкурс сео-специалист месяца</a></li>
	<li><a title="Ебаный сео" href="http://samizdam.net/2011/09/%d0%b5%d0%b1%d0%b0%d0%bd%d1%8b%d0%b9-%d1%81%d0%b5/">Ебаный сео</a></li>
	<li><a title="Будущее наступает" href="http://samizdam.net/2011/09/%d0%b1%d1%83%d0%b4%d1%83%d1%89%d0%b5%d0%b5-%d0%bd%d0%b0%d1%81%d1%82%d1%83%d0%bf%d0%b0%d0%b5%d1%82/">Будущее наступает</a></li>
	<li><a title="О книгах и всём что с ними связано" href="http://samizdam.net/2011/09/%d0%be-%d0%ba%d0%bd%d0%b8%d0%b3%d0%b0%d1%85-%d0%b8-%d0%b2%d1%81%d1%91%d0%bc-%d1%87%d1%82%d0%be-%d1%81-%d0%bd%d0%b8%d0%bc%d0%b8-%d1%81%d0%b2%d1%8f%d0%b7%d0%b0%d0%bd%d0%be/">О книгах и всём что с ними связано</a></li>
	<li><a title="Стивен Холзнер &ndash; XSLT. Библиотека программиста" href="http://samizdam.net/2011/09/%d1%81%d1%82%d0%b8%d0%b2%d0%b5%d0%bd-%d1%85%d0%be%d0%bb%d0%b7%d0%bd%d0%b5%d1%80-xslt-%d0%b1%d0%b8%d0%b1%d0%bb%d0%b8%d0%be%d1%82%d0%b5%d0%ba%d0%b0-%d0%bf%d1%80%d0%be%d0%b3%d1%80%d0%b0%d0%bc%d0%bc/">Стивен Холзнер &ndash; XSLT. Библиотека программиста</a></li>
	<li><a title="Сравнение timeweb и spaceweb" href="http://samizdam.net/2011/08/%d1%81%d1%80%d0%b0%d0%b2%d0%bd%d0%b5%d0%bd%d0%b8%d0%b5-timeweb-%d0%b8-spaceweb/">Сравнение timeweb и spaceweb</a></li>
	<li><a title="Проверка cookies на php+jQuery" href="http://samizdam.net/2011/08/%d0%bf%d1%80%d0%be%d0%b2%d0%b5%d1%80%d0%ba%d0%b0-cookies-%d0%bd%d0%b0-phpjquery/">Проверка cookies на php+jQuery</a></li>
</ul>

Выглядит это так:

Проявив немного фантазии и смекалки, оказывается можно найти немало применений некоторым возможностям css, казалось бы и мало популярным.

Эта запись была опубликована в рубрике Статьи-заметки и отмечена метками , , , . Добавить в закладки ссылку.

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>