Css картинка before: html — Как вставить картинку с помощью псевдоэлемента before?

Содержание

Свойство content • Про CSS

С помощью CSS на страницу можно добавить элементы, несуществующие в разметке страницы. Это делается с помощью псевдоэлементов :before и :after, но не менее важную роль в этом играет свойство content.

Оно определяет содержимое псевдоэлементов. И даже больше, псевдоэлементы не отобразятся, если у них не задано свойство content. Достаточно такой строки:

Спецификация тут: w3.org/TR/css3-content/

Снеговики в примере добавлены с помощью content для псевдоэлементов, сами снеговики — символы юникода:

DIV:before {
  content: "\2603";
}

Возможные значения свойства:

normal, none — содержимое псевдоэлемента не отображается. Полезно, если нужно скрыть ранее заданный псевдоэлемент.

<string> — текстовый контент. Можно вставлять простой текст и символы юникода, как в примере выше. Для практических целей очень пригодятся разные варианты стрелок. Символы юникода можно найти, например, тут или тут.

DIV:before  {
  content: "Hello";
}

<uri> — адреса картинок.

DIV:before  {
  content: url(//img-fotki.yandex.ru/get/5413/5091629.67/0_5ba12_81d03a82_XS.png);
}

Практическое применение — иконки перед ссылкам на профили в соцсетях, иконка для обозначения внешней ссылки, буллеты списков.

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

Варианты решений:

  • спрайт, иконки из которого вставляются фоном в саму ссылку или в псевдоэлемент. Второе предпочтительней, потому что тогда псевдоэлемент ограничит область видимости спрайта, таким образом иконки в спрайте могут быть расположены не только вертикально, но и рядами.
    Количество запросов к серверу уменьшается до одного, но при этом картинка кешируется у пользователя;
  • закодировать отдельные картинки в base-64 и вставлять через content: url();
  • закодировать весь спрайт в base-64 и использовать его как фон для псевдоэлемента.

В двух последних вариантах вообще не будет запросов к серверу, но картинки не кешируются и, кроме того, закодированное изображение может весить больше исходного. Способ имеет смысл использовать только для небольших изображений.

Закодировать картинку в base64 можно с помощью онлайн-сервисов. Полученный код вставляется в url() с информацией о формате содержимого, например data:image/png;base64.

Вот так будет выглядеть код для иконки Instagram:

[href*="instagram.com"]:before {
    content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowQTgwMTE3NDA3MjA2ODExODA4Mzk4RDI3RDIwODg4MiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0NjAxNEU1NjQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0NjAxNEU1NTQyRUExMUUxOEI5MEE1MTY2N0VBMzA1NiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjk3MDc3Njg4MTUyMDY4MTE4MDgzOThEMjdEMjA4ODgyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjBBODAxMTc0MDcyMDY4MTE4MDgzOThEMjdEMjA4ODgyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8++UbndwAAArdJREFUeNqUk0tME1EUhr+ZDoW2tBS0vLQCkqgLE4X4DBoBFxIXBqNCQI0rF8TEhS5MNC4MLkxcGRb4jonxFVApKBJNZCG+giJddAEoUEEWAikI9t2OMxeKJLrhZE7mPv7vv3fmniud2lN0EKjTspylxWstGxVVVU+szywoNRFkcHMa7nAxiqEYJjo5vtLwX1JjGBkZLXf3fJEVSZJKDcEwUSlELBIiHAkTisYxBkP4ff5/4BPX28X70pFydFbRO9FIBEWJEY/HialxpKkh+NFP0+CMEGdazazJyiDLZsFss6NqY+FAUMwJg0g4jCLFtb3FUIb7yQp+Zn/tYXz+KMHfs+QsT+Pp4wc4fk5SX7lJgNOTE3MGssXIwO9pCECwM0Ce00pZ5TFOnbuIxWpjwjeprTbL5frzdHe94nV3LynaQnrorJLqsLKv7igGay5Njx5SuruCutMXKCutITcnh9Rlybzpc3O24SZ3Lp7hZXsL1TW1xGbGaG2+i6wYZBwZNpwrsvF6h/H0DeFcvY5u93s8X0doedeLkreW6YAk5rxer9DqjM4q8wcjjkZ7SLXbGR8fIxhSCclx+j99YSZ7Pct2HSLZZNbPUGgRv3L+J4q2Npi/yklBpo3v3zyoRgujz64ip6Tz7cVtMvIzKdx7gOH8PKGd55EThaHn9i2baWtzcf/GFaKzPuQkI/6JAZga5NbJI7S6ngiNurAL/n6CnhuKNuLxeGhtacJ1twGf7xfJaQ7Mcpjme9cozHMKTUK/yGAujCkpVFVX8eFtF89dLYz7psS4I91OWclWtpXsEJrFIQzUWAQ1HkOWDVhsNnaWlVNUXEzAP1fKJrOZ1DS7gLXyFVqdSRh0DPX1VBRoDcmQtOBs0u6RyZro+YnN+tHqicSCGqM3O3SDxq6PbrSsWOJ17tDZPwIMAKAIId5/sWegAAAAAElFTkSuQmCC)
}

Код длинный и заканчивается где-то за горизонтом. Кроме того, по коду непонятно что за картинка в нём лежит, и, при необходимости отредактировать, картинку надо будет каждый раз кодировать и вставлять заново, хотя в случае с обычным изображением его надо будет просто перезалить. В то же время есть плагин для гранта, который автоматически кодирует картинки и заменяет в коде адреса картинок на base64.

Подобным же образом можно вставлять SVG.

DIV:before{
	content: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg">&lt;path d="M19.414 27.414l10-10c0.781-0.781 0.781-2.047 0-2.828l-10-10c-0.781-0.781-2.047-0.781-2.828 0-0.781 0.781-0.781 2.047 0 2.828l6.586 6.586h-19.172c-1.105 0-2 0.895-2 2s0.895 2 2 2h29.172l-6.586 6.586c-0.39 0.39-0.586 0.902-0.586 1.414s0.195 1.024 0.586 1.414c0.781 0.781 2.047 0.781 2.828 0z" fill="#FFF" />&lt;/svg>');
	}

Это очень удобно, но пока что работает не во всех браузерах. Например, Chrome такое поймет и отобразит, а Firefox — нет.

Upd: SVG в CSS будет работать во всех браузерах, если закодировать его как адресную строку. Это можно сделать с помощью URL Encoder.

<counter> — счетчик. С помощью этого значения можно пронумеровать не только списки, но и любые элементы на странице. Например, разделы статьи.

BODY {
  counter-reset: h3-counter;
  counter-reset: p-counter;
}

DIV {
  counter-increment: h3-counter;
}

h3:before {
  content: counter(h3-counter) ". ";
}

P:before {
  content: counter(p-counter) ". ";
  counter-increment: p-counter;
}

counter-reset задает имя счетчика.

counter-increment увеличивает значение заданного счетчика.

content: counter(имя счетчика)

выводит значение счетчика в качестве содержимого псевдоэлемента.

attr(<identifier>) — это значение выводит содержимое заданного атрибута. Удобно использовать для вывода атрибутов href в версии для печати и для разных интересных эффектов.

A:before  {
  content: attr(title);
}

Много эффектов можно найти тут: tympanus.net/Development/CreativeLinkEffects/

open-quote, close-quote — значения для вывода открывающих и закрывающих кавычек. Символы, которые будут использованы, определяются свойством quotes. Если оно не задано, будут использованы значения по умолчанию, которые зависят от браузера.

BLOCKQUOTE {
	quotes: '"' '"' "'" "'";
}
BLOCKQUOTE:before {
  content: open-quote;
  }
BLOCKQUOTE:after  {
  content: close-quote;
  }

no-open-quote, no-close-quote — значение отключает отображение кавычек, но при этом продолжает учитываться уровень их вложенности.

В спецификации есть ещё много интересного вроде псевдоэлемента, представляющего обертку для всего элемента или множественные псевдоэлементы, но в данный момент это нигде не реализовано.

Всё о :Before и :After в CSS

Сегодня мы собираемся  рассмотреть псевдо-элементы :before и :after. Вы, наверное, часто видели как их используют в сложных примерах CSS. Итак, сегодня Вы можете также научиться их использовать самостоятельно.

Что такое псевдо-элемент и чем он отличается от псевдо-класса? Почему псевдо-элементы иногда имеют одно двоеточие, а иногда и два? Как :before и :after реализован в CSS? Какие приемы используют разработчики во всем мире для создания удивительных вещей при помощи CSS? Читайте дальше, чтобы узнать это.

Псевдо-классы vs. Псевдо-элементы


Очень многие люди путают эти понятия или не понимают в чем разница (включая и меня, прежде чем погрузиться в это исследование). Если вы воспользуетесь поиском, чтобы найти различия между ними, то вы найдете длинные и слишком "технические" ответы, перемешанные с простыми, голословными заявлениями о том, что это различные вещи по сути, но без обсуждения, как и почему. Некоторые источники, такие как W3Schools, похоже, используют эти термины как взаимозаменяемые, что часто приводит к их неправильному использованию.

Ответ же на этот вопрос довольно прост.

Псевдо-классы: относятся ко всему элементу


Во-первых, давайте посмотрим на псевдо-классы, которые нацелены на весь элемент или его состояние.

a:link {color: #111}
a:hover {color: #222}
div:first-child {color: #333}
div:nth-child(3) {color: #444}

Как вы можете видеть, что эти условия не обязательно основаны на DOM, в результате выбирается весь элемент в каждом случае. Что в конечном итоге определяет стили для всей ссылки, параграфа, div-а и т.д.

Псевдо-элементы: целевой элемент - часть целого.


Псевдо-элементы, с другой стороны, относятся к части элемента. Это важное различие, вот несколько примеров:

p::first-line {color: #555}
p::first-letter {color: #666}
a::before {content : "hello world";}

Как видите, все они указывают только на часть элемента: на первую строку или первую букву параграфа, например. Они также обладают замечательной способностью определять и даже добавлять вещи, которые даже не указаны в HTML, а именно это :before и :after, то что сегодня мы и обсуждаем.

Чтобы узнать больше о различиях между псевдо-классами и псевдо-элементами, я настоятельно рекомендую вам посмотреть UMD, для хорошего и подробного ознакомления, с большим количеством примеров.

:before vs. ::before


Перед тем, как перейти непосредственно к объяснению :before и :after, и как их можно использовать для выполнения некоторых интересных задач, давайте проясним еще один важный  момент, который часто вызывает вопросы. Если вы посмотрите в Интернете примеры с :before и :after, то вы найдете использование двух разных вариантов.

Иногда разработчики используют одно двоеточие, а иногда они будут использовать два. Они используют разные функции? Вовсе нет, оказывается, они абсолютно одинаковые с функциональной точки зрения, то есть вы получите тот же результат и они используются для одинаковых целей. Так в чем же разница? Вот пример:

/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}
 
/*CSS3*/
. example::before {}
.example::after {}
.example:first-child {}

Как вы можете видеть, в CSS2, мы использовали одно двоеточие для определения псевдо-классов и псевдо-элементов. Однако, чтобы помочь различать их, в CSS3 добавлено второе двоеточие только для псевдо-элементов.

Проблемы с IE, опять.

Так почему же мы все еще видим оба синтаксиса в современных примерах и учебниках? Остаются ли некоторые разработчики просто в неведении относительно этого изменения? Это может и так, но, вероятно, ответственность за большинство из этих противоречий лежит на нашем старом друге - Internet Explorer-е, разрушителе всего нового и хорошего в мире веб-разработки.

Оказывается, что все современные браузеры понимают синтаксис двойного двоеточия, но, к сожалению, с IE8 это не так. По этой причине, при кодировании с ::before и ::after, большинство разработчиков предпочитают для совместимости просто использовать синтаксис CSS2 с одним двоеточием. Чтобы не усложнять объяснение мы будем придерживаться этого синтаксиса в остальной части этой статьи.

Что такое :before и :after?


Это всё была теория, но это необходимо знать, если вы собираетесь участвовать в обсуждении вопросов использования :before и :after в CSS. Теперь мы можем, наконец, посмотреть как эти вещи работают.

Концепция здесь на самом деле очень проста. Оба псевдо-элемента :before и :after позволяет фактически добавить HTML-элементы из вашего CSS-кода, не загромождая самой разметки. Это открывает большие возможности для добавления различных декоративных элементов, которые не обязательно заслуживают дополнительной разметки.

Например, предположим, что у вас есть несколько телефонных номеров на своем сайте и вы хотели бы разместить ☎ значок перед ними. Вы можете использовать псевдо-элемент :before, чтобы сделать это (content:"&#9742;"):

.phoneNumber:before {
 content:"&amp;#9742;";
 font-size: 15px;
}

Этот код будет вставлять маленький значок перед каждым элементом с классом .phoneNumber. :after работает точно так же, только, как вы можете догадаться, он будет добавлять значок после номера телефона.

.phoneNumber:after {
 content:"&amp;#9742;";
 font-size: 15px;
}

Небольшой пример


Одной из причин по которой :before и :after стали невероятно популярны в последнее время, является их способность значительно увеличить сложность CSS элементов. Без дополнительной разметки, мы можем использовать эти псевдо-элементы для добавления дополнительных элементов и слоев.

Чтобы увидеть, как это работает, давайте создадим простую кнопку. Тут простые стили для класса button, которые создают круг с красным градиентом.:

.button {
 height: 100px;
 width: 100px;
 position: relative;
 margin: 50px;
 color: white;
 text-align: center;
 line-height: 100px;
 
 /*закругленные углы и тень*/
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
 -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
 box-shadow: 2px 2px 4px rgba(0,0,0,0. 4);
 
 /*градиент*/
 background: #e51d16; /* для старых браузеров */
 background: -moz-linear-gradient(top,  #e51d16 0%, #b21203 100%); /* для FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* для Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* для Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* для Opera 11.10+ */
 background: -ms-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* для IE10+ */
 background: linear-gradient(top,  #e51d16 0%,#b21203 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51d16', endColorstr='#b21203',GradientType=0 ); /* IE6-9 */
}

Весь этот код приведет к созданию довольно простой, круглой кнопки:

Теперь, допустим, мы хотим добавить немного затемненную область за пределами кнопки и придать ей внутреннюю тень. Вместо добавления дополнительной разметки, мы можем просто использовать пустой псевдо-элемент.

.button:before {
 content:"";
}

Теперь мы можем задать стили, чтобы добавить нужный эффект. Тут уже всё зависит от вашей фантазии или вы можете посмотреть многочисленные уроки по CSS в сети.

.button:before {
 content:"";
 width: 100%;
 height: 100%;
 display: block;
 z-index: -1;
 position: relative;
 padding: 15px;
 background: #ddd;
 left: -15px;
 top: -15px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

Теперь наша кнопка немного больше по размеру.  Псевдо-элемент :before образует внешнее кольцо. Мы установили ему z-index: -1, чтобы спрятать его за кнопку и использовали абсолютное позиционирование, чтобы поставить его на нужное место.

Теперь предположим, что мы хотели сделать то же самое еще ​​раз. Это можно осуществить используя псевдо-элемент :after и повторить процесс.

.button:after {
 content:"";
 width: 100%;
 height: 100%;
 display: block;
 z-index: -2;
 position: relative;
 padding: 25px;
 background: #eee;
 position: absolute;
 left: -25px;
 top: -25px;
 -webkit-border-radius: 100px;
 -moz-border-radius: 100px;
 border-radius: 100px;
 -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
 box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

Он просто добавляет еще один слой. Теперь кажется, что у нашей кнопки есть двойная, объемная рамка:

Демонстрация


Если вы хотите увидеть это в действии и поэкспериментировать с кодом, то посмотрите демо на Tinkerbin. Попробуйте, на основе этого примера, сделать свою собственную кнопку.

Перевод статьи с designshack.net


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Псевдоэлементы - Основы вёрстки контента

Основы вёрстки контента

В прошлых уроках мы разобрали псевдоклассы — изменение существующих элементов в зависимости от их состояния. А возможно ли задать или создать стили для таких элементов, которых нет внутри HTML? Да! И для этого в CSS существует понятие псевдоэлементов.

Разберёмся на примере стилизации буквицы. Буквица — увеличенный первый символ в параграфе. Вы часто можете встретить этот приём в книгах со сказками или книгах, стилизованных под старину. Каким способом это можно сделать? Первое, что приходит в голову — обернуть первый символ в отдельный тег и стилизовать именно его.

<article>
  <p>
    <span>Ж</span>ил старик со своею старухой <br>
    У самого синего моря; <br>
    Они жили в ветхой землянке <br>
    Ровно тридцать лет и три года. 
  </p>
</article>
article {
  color: #37474f;
  font: 25px/1.5 serif;
}

.first-letter {
  color: #f44336;
  font-size: 2em;
  line-height: 1;
}

Хороший и рабочий вариант, подходящий для точечных изменений в некоторых текстах. Какие проблемы тут могут быть скрыты? Во-первых: если таких текстов много, то добавлять теги к каждому нужному параграфу достаточно долго и риск ошибки возрастает. Можно забыть проставить тег или проставить не на первой букве. Во-вторых, масштабируемость падает. В случае избавления от буквицы нужно удалить все классы или удалить стили, но тогда останутся ненужные теги, которые скорее запутают.

Как можно выйти из этой ситуации? Тут в дело и вступают псевдоэлементы. Они могут виртуально создать за нас такой тег и стилизовать его используя только CSS. Это решает сразу две проблемы, которые были описаны выше:

  1. Нет необходимости проставлять новые теги. Достаточно только указать нужный селектор в CSS.
  2. После удаления такого класса в HTML не останется ненужных тегов.

За стилизацию первого символа отвечает псевдоэлемент ::first-letter. Он виртуально обернёт первый символ и применит к нему пользовательские стили. Немного перепишем пример и для всех параграфов внутри article укажем буквицу.

article {
  color: #37474f;
  font: 25px/1.5 serif;
}

article p::first-letter {
  color: #f44336;
  font-size: 2em;
  line-height: 1;
}

Результат не изменился, но, с точки зрения работы браузера, произошло много изменений. Браузер автоматически нашёл первый символ в параграфе, который находится внутри article. Обернул его и применил стили, описанные в CSS.


Интересно: псевдоэлементы, по синтаксису, очень похожи на псевдоклассы, но вместо одного символа : используется два. При этом браузеры правильно обработают такой псевдоэлемент :first-letter. При такой записи не сразу очевидно где псевдокласс, а где псевдоэлемент, поэтому всегда используйте :: для указания псевдоэлемента.


before и after

Для этих двух псевдоэлементов можно написать не только урок, но и целый курс. Их взаимодействие с сайтами невозможно переоценить. Используясь в большинстве случаев, ::before и ::after по праву являются самыми важными псевдоэлементами. В процессе изучения вёрстки можно придумать различные способы их использования и стилизации.

В уроке про списки было сказано, что стилизация маркеров чаще всего происходит с помощью псевдоэлементов. В этой части рассмотрим, как же это делается.


Важно: здесь будут свойства, которые относятся к позиционированию элементов. Все эти свойства будут изучены в курсе CSS: Позиционирование. Если некоторые части CSS будут непонятны, то не переживайте. В скором времени вы изучите работу всех новых свойств.


::before и ::after позволяют создать новый контент внутри HTML дерева. Этот контент привязан к определённому элементу и может появляться до него или после. Именно поэтому псевдоэлементы называются так:

  • ::before — псевдоэлемент, позволяющий добавить контент перед выбранным элементом.
  • ::after — псевдоэлемент, позволяющий добавить контент после выбранного элемента.

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

Создадим блочный элемент и воспользуемся новыми псевдоэлементами.

<div>
  <p>Контент внутри блока</p>
</div>
.square::before {
  content: "Текст до контента внутри блока";
}

.square::after {
  content: "Текст после контента внутри блока";
}

Весь контент внутри псевдоэлементов ::before и ::after является строчным. То есть имеет свойство display: inline по умолчанию. Вы легко можете изменять это и работать с псевдоэлементами так, как если бы это были обычные элементы внутри HTML документа.

Это открывает поистине безграничные возможности стилизации элементов с помощью CSS. Много техник построено на использовании псевдоэлементов. Создадим пользовательские маркеры списка, используя изображение.

<h2>Обучение на Хекслете</h2>
<ul>
  <li>Большое количество теории</li>
  <li>Множество практик и дополнительных заданий</li>
  <li>Комплексные проекты для закрепления знаний</li>
</ul>
.hexlet-ul {
  list-style: none;
}

.hexlet-ul li {
  position: relative;

  margin-bottom: 20px;
}

.hexlet-ul li::before {
  position: absolute;
  left: -30px;

  width: 20px;
  height: 20px;

  background-image: url(https://assets.codepen.io/1425525/hexlet_logo.png);
  background-repeat: no-repeat;
  background-size: cover;

  content: '';
}

Разберём, что происходит в псевдоэлементе . hexlet-ul li::before:

.hexlet-ul li::before {
  width: 20px;
  height: 20px;

  content: '';
}

В этой части CSS кода указывается пустой content. Так как мы хотим добавить только изображение, то никакие символы нам не нужны. Данное поле можно оставить пустым, но добавлять его обязательно. Для элемента задаются определённые рамки высоты и ширины. Именно в эти рамки мы и будем вписывать изображение.

.hexlet-ul li::before {
  background-image: url(https://assets.codepen.io/1425525/hexlet_logo.png);
  background-repeat: no-repeat;
  background-size: cover;
}

Устанавливаем изображение для блока. Для этого мы используем три свойства:

  1. background-image — свойство, позволяющее установить изображение в качестве фона. Внутри используем функцию url для указания адреса, по которому расположено изображение.
  2. background-repeat — повтор изображения. Нужно ли повторять изображение, если это возможно? В данном случае нет, так как нам нужно конкретное изображение, а не повторяющийся фон. Значение no-repeat запрещает повторять изображение.
  3. background-size — размер изображения. Ключевое слово cover масштабирует изображение с сохранением пропорций и вписывает его в высоту или ширину существующего блока.

Позиционировав этот псевдоэлемент мы получили изображение в качестве маркера списка. Для этого не пришлось подстраивать изображение, так как эта работа осталась за CSS.

Дополнительное задание

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

Дополнительные ссылки


Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

css — Можете ли вы применить ширину к псевдоэлементу: before /: after (content: url (изображение))?

Вы не сумасшедший: действительно невозможно изменить размеры изображения, которое вставляется с помощью content. Изображение всегда отображается как есть. Это называется заменяемым контентом или замененный элемент (за исключением того, что здесь мы не говорим об элементах).

Однако, поскольку размер заменяемых элементов можно с помощью width и height, как описано в раздел 10 спецификации CSS2.1 , это ставит вопрос о том, почему свойства здесь не применяются. Казалось бы, ответ на этот вопрос заключается в том, что свойства применяются, но вместо этого поле псевдоэлемента - вы можете увидеть это, задав псевдоэлемент цвет фона. Вместо того, чтобы заменять сам блок псевдоэлемента, изображение отображается как дочерний элемент блока псевдоэлемента и, следовательно, не может быть стилизовано вообще ( поскольку это потребовало бы другого псевдоэлемента, который не существует).

И это приводит к другому вопросу: почему он вообще не заменяет блок псевдоэлементов? К сожалению, CSS2.1 вообще не определяет это поведение, поэтому согласованная реализация заключается в том, чтобы визуализировать контент как дочерний элемент блока псевдоэлемента :

CSS2.1 на самом деле не дает четкого определения модели обработки "контента" на :: before и :: after, но информативные примеры в CSS 2.1, тот факт, что "контент" указывает список вещей, и стремление к согласованности привело к тому, что поведение UA является следующим: свойство 'content' определяет список вещей, которые становятся потомками блока :: before или :: after ,.

-Boris

Надеемся, что это будет дополнительно рассмотрено на уровне CSS Generated Content 3, на котором работа по переписыванию только началась.

В то же время, если вы хотите изменить размер псевдоэлемента :after и сгенерированного изображения, вам потребуется вместо этого применить его в качестве фонового изображения и - при условии, что поддержка браузера не является проблемой - используйте background-size вместе с width и height для его масштабирования (исходя из понимания, что эти свойства вместо этого применяются к блоку псевдоэлемента).

CSS свойство image-rendering

Свойство image-rendering устанавливает алгоритм изменения масштаба изображения.

По умолчанию браузеры применяют бикубический алгоритм (aliasing) к масштабированному изображению, чтобы предотвратить искажение, но это может быть проблемой, если хотите, чтобы изображение сохраняло свой оригинальный пикселизированный вид.

Значение по умолчанию auto
Применяется Ко всем элементам.
Наследуется Да
Анимируемое Discrete.
Версия CSS3
DOM синтаксис object.style.imageRendering = "pixelated";

Синтаксис¶

image-rendering: auto | crisp-edges | pixelated | initial | inherit;

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .pixelated {
      image-rendering: pixelated;
      }
      .resize {
      width: 45%;
      clear: none;
      float: left;
      }
      .resize:last-of-type {
      float: right;
      }
      .resize img {
      width: 100%;
      }
      img {
      margin-bottom: 20px;
      width: 100%;
      }
      .original img{
      width: 20%;
      }
      body {
      background-color: #ccc;
      padding: 20px;
      }
    </style>
  </head>
  <body>
    <h3>Пример свойства image-rendering</h3>
    <div>
      <p>Оригинальный размер изображения:</p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
    <div>
      <p><code>image-rendering: auto</code></p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
    <div>
      <p><code>image-rendering: pixelated</code></p>
      <img src="/uploads/media/default/0001/02/2895884641188df105fa653fee0b33c785dd7b3d.png" alt="W3docs logo" />
    </div>
  </body>
</html>
Попробуйте сами!

Значения¶

Значение Описание
auto Стандартный алгоритм масштабирования изображения. Значение по умолчанию.
crisp-edges Значения изображения сохраняются без применения эффекта сглаживания или размытия.
pixelated Браузер сохраняет пикселизированный стиль, используя метод масштабирования ближайшего соседа.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

::before. CSS псевдоэлемент для вывода текста перед содержимым элемента

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

Псевдоэлемент ::before работает совместно со свойством content. Для ::before справедливо следующее:

  • При добавлении ::before к блочному элементу, значение свойства display может быть только: block или inline, none, marker. Все остальные значения будут трактоваться как block.
  • При добавлении псевдоэлемента ::before к строчному элементу, свойство display ограничено значениями inline и none. Все остальные будут восприниматься как inline.
  • ::before наследует стиль от html элемента, к которому он добавляется.

Правила написания CSS-псевдоэлемента ::before

Селектор:before { ... } /* CSS 2.1 */
Селектор::before { ... } /* CSS 3 */

Начиная с CSS3 псевдоэлементы обозначаются двумя двоеточиями, чтобы отличать их от псевдоклассов.

Пример применения псевдоэлемента ::before

Проиллюстрируем работу псевдоэлемента ::before на примере списка с планшетами. Наша задача выделить новинки. Вот как это можно сделать:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>after</title>
  <style>
    li::before {
     content: "♦ "; /* Желаемый символ перед списком */ 
   }
   li {
     list-style: none; /* Убираем дефолтные маркеры */ 
   }
  </style>
 </head>
 <body>
  <h3>Планшеты</h3>
  <ul>
  <li>Teclast X3 Pro</li>
  <li>Lark Evolution X4 101</li>
  <li>Irbis TZ84</li>
 </body>
</html>
Применение псевдоэлемента ::before

Добавление горизонтальных линий до и после заголовка или изображения на CSS

Для того, чтобы добавить в качестве обрамительного элемента горизонтальные линии до и после заголовка (картинки, логотипа и т.д.) можно использовать CSS и сделать при этом вполне адаптивный вариант.

Для этого нужно использовать псевдоэлементы :before и :after. Html-конструкция должна выглядеть следующим образом:

<div> <span>ЗАГОЛОВОК</span> </div>

<div>

    <span>ЗАГОЛОВОК</span>

</div>

Для основной обертки используем следующие CSS-правила:

.block { text-align: center; /* выравнивание заголовка по центру обертки */ width: 80%; /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */ margin: 0 auto; /* выравнивание обертки по центру документа */ overflow: hidden; /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */ }

.block {

    text-align: center;  /* выравнивание заголовка по центру обертки */

    width: 80%;          /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди 🙂 */

    margin: 0 auto;      /* выравнивание обертки по центру документа */

    overflow: hidden;    /* прячем линии за границами обертки, чтобы в случае изменения ширины экрана линии не выходили за ее пределы */

}

Для дочернего элемента <span> добавляем позиционирование, чтобы впоследствии управлять расположением линий в рамках обертки:

.block span { position: relative; }

.block span {

     position: relative;

}

Теперь перейдем непосредственно к оформлению псевдоэлементов (будущих линий):

.block span:before { display: block; /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div'ом */ width:1000px; /* устанавливаем ширину линию. Можно использовать произвольную ширину */ content: ''; /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */ position: absolute; /* абсолютное позиционирование для управления линиями */ border-bottom: 1px solid #000; /* бордер псевдо дива, т.е. сама линия */ top:50%; /* позиционирование по вертикали */ right: 110px; /* позиционирование по горизонтали */ } /* аналогичные стили для второго псевдоэлемента */ .block span:after { display: block; width:1000px; content: ''; position: absolute; border-bottom: 1px solid #000; top:50%; left: 110px; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.block span:before {

    display: block;                  /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div'ом */

    width:1000px;                    /* устанавливаем ширину линию. Можно использовать произвольную ширину */

    content: '';                     /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */

    position: absolute;              /* абсолютное позиционирование для управления линиями */

    border-bottom: 1px solid #000;   /* бордер псевдо дива, т.е. сама линия */

    top:50%;                         /* позиционирование по вертикали */

    right: 110px;                    /* позиционирование по горизонтали */

}

 

/* аналогичные стили для второго псевдоэлемента */

 

.block span:after {

    display: block;

    width:1000px;

    content: '';

    position: absolute;

    border-bottom: 1px solid #000;

    top:50%;

    left: 110px;

}

Вот собственно все. Линии слева и справа от заголовка появились, они полностью на CSS, смотряться аккуратно как на десктопе, так и на мобильных устройствах.
Демо

Как разместить фоновое изображение с помощью псевдоселекторов :: before в CSS?

< html lang = "en" >

000 000 000 000 000 000 000 000 000 < meta charset = "UTF-8" >

< meta name = " " viewport content = "viewport content = "

"ширина = ширина устройства, начальный масштаб = 1.0 " >

< title >

Как разместить фоновое изображение перед

с помощью псевдоселекторов

заголовок >

< стиль >

* {

* {

заполнение: 0px;

}

body {

выравнивание текста: center; 000

h2 {

цвет: зеленый;

}

.контейнер {

ширина: 100vw;

высота: 100вх;

дисплей: гибкий;

justify-content: center;

align-items: center;

цвет: черный;

font-weight: жирный;

font-size: 2rem;

}

.контейнер :: перед {

содержание: '';

фон: url ('bg.png')

центр / крышка без повтора;

позиция: абсолютная;

непрозрачность: 0,3;

верх: 0px;

слева: 0px;

ширина: 100vw;

высота: 100вх;

z-index: -1;

}

диапазон {

font-size: 2em;

}

стиль >

головка >

0003

< div class = «контейнер» >

GeeksforGeeks < br > <0009 разместить фоновое изображение с помощью псевдоселекторов

:: before?

div >

корпус >

перед before) - CSS: каскадные таблицы стилей

В CSS :: before создает псевдоэлемент, который является первым дочерним элементом выбранного элемента.Он часто используется для добавления косметического содержимого к элементу со свойством content . По умолчанию он встроен.

 
a :: before {
  содержание: «♥»;
}  
 / * синтаксис CSS3 * /
::перед

/ * Синтаксис CSS2 * /
: до 

Примечание: CSS3 представил нотацию :: before (с двумя двоеточиями), чтобы отличать псевдоклассы от псевдоэлементов. Браузеры также принимают : до , представленного в CSS2.

Добавление кавычек

Одним из простых примеров использования псевдоэлементов :: before является использование кавычек.Здесь мы используем как :: before , так и :: after , чтобы вставить символы кавычек.

HTML
   Некоторые цитаты , по его словам,  лучше, чем ничего.   
CSS
  q :: before {
  содержание: """;
  цвет синий;
}

q :: after {
  содержание: """;
  красный цвет;
}  
Результат

Декоративный пример

Мы можем стилизовать текст или изображения в свойстве content почти так, как захотим.

HTML
   Обратите внимание на оранжевую рамку.   
CSS
  .ribbon {
  цвет фона: # 5BC8F7;
}

.ribbon :: before {
  content: «Посмотрите на эту оранжевую рамку.»;
  цвет фона: # FFBA10;
  цвет границы: черный;
  стиль границы: пунктирная;
}  
Результат

Список дел

В этом примере мы создадим простой список дел, используя псевдоэлементы. Этот метод часто можно использовать для добавления небольших штрихов в пользовательский интерфейс и улучшения взаимодействия с пользователем.

HTML
  
  • Купите молоко.
  • Выведите собаку на прогулку.
  • Упражнение
  • Напишите код
  • Включи музыку.
  • Расслабьтесь
CSS
  li {
  тип-стиль-список: нет;
  положение: относительное;
  маржа: 2 пикселя;
  заполнение: 0.5em 0.5em 0.5em 2em;
  фон: светло-серый;
  семейство шрифтов: без засечек;
}

li.done {
  фон: # CCFF99;
}

ли.done :: before {
  содержание: '';
  позиция: абсолютная;
  цвет границы: # 009933;
  стиль границы: сплошной;
  ширина границы: 0 0.3em 0.25em 0;
  высота: 1em;
  верх: 1.3em;
  слева: 0,6em;
  маржа сверху: -1em;
  преобразовать: повернуть (45 градусов);
  ширина: 0,5 мм;
}  
JavaScript
  var list = document.querySelector ('ul');
list.addEventListener ('щелчок', функция (ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle ('готово');
  }
}, ложный);
  

Вот пример кода выше, работающий в реальном времени.Обратите внимание, что здесь не используются значки, а галочка - это фактически :: до , стилизованные в CSS. Давай, сделай кое-что.

Результат

Специальные символы

Как это CSS; не HTML, вы можете не использовать объекты разметки в значениях содержимого. Если вам нужно использовать специальный символ и вы не можете ввести его буквально в строку содержимого CSS, используйте escape-последовательность Unicode, состоящую из обратной косой черты, за которой следует шестнадцатеричное значение Unicode.

HTML
  
  1. Разбить яйца в миску.
  2. Добавьте молока
  3. Добавьте муку
  4. Тщательно перемешайте до однородного теста.
  5. Налейте половник жидкого теста на горячую, смазанную маслом плоскую сковороду.
  6. Жарить до тех пор, пока верх блина не потеряет блеск.
  7. Переверните и жарьте еще пару минут.
  8. подавать с любимой начинкой.
CSS
  li {
  отступ: 0.5em;
}

li [aria-current = 'step'] {
  font-weight: жирный;
}

li [aria-current = 'step'] :: after {
  содержание: "\ 21E6";
  дисплей: встроенный;
}
  
Результат

таблицы BCD загружаются только в браузере

изображений в свойстве CSS содержимого

Тест: изображения в свойстве CSS содержимого

Проверяйте элементы / псевдоэлементы, чтобы узнать, какие именно стили CSS тестируются.

Использование

:: до и :: после

Перед текстом

должен быть значок.

После текста

должен быть значок.

И значок здесь -> <- (URL base64)

Изменить размер изображения с помощью CSS? (ширина + высота)

Изменить размер изображения с помощью CSS? (ширина + высота AUTO)

С

: до и : после (для IE8)

Перед текстом

должен быть значок.

После текста

должен быть значок.

И значок здесь -> <- (URL base64)

Может быть, изображение в формате SVG

?

Внешнее изображение SVG с шириной / высотой

Внешний SVG без ширины / высоты; размеры заданы в CSS (должны быть больше)

Внешний спрайт SVG (символ)

Внешний спрайт SVG (: цель)

Внешний спрайт SVG, другой значок (: target)

Выводы

Хорошая новость: вставка изображения в качестве содержимого :: before или :: after работает везде.

Менее хорошие новости: существует несколько ограничений, поэтому вам, вероятно, лучше использовать background-image , если вы хотите вставить декоративное изображение (с использованием псевдоэлемента или без него). Некоторые детали:

  1. Если изображение content: url (…) является растровым, оно будет иметь собственные внутренние размеры и не может быть изменено в CSS. Фактически это похоже на то, что браузер создает следующую структуру:
      <элемент>
      <до>
       
    И нет возможности стилизовать сгенерированное изображение.
  2. Если это изображение является SVG, его можно изменить размер в CSS (путем изменения размера самого псевдоэлемента). Не знаю почему.
  3. Использование спрайтов SVG не работает. Ссылка на не работает, а использование метода : target работает в Firefox и IE, но не в Chrome, что затрудняет определение размера изображения.
  4. Для IE8 используйте синтаксис : before и : after и только растровые изображения.

Чистый CSS-эффект изображения до и после

Чистый CSS эффект изображения до и после

Обновлено : 27 мая 15 г.

В этом уроке мы увидим, как аккуратное наложение двух изображений в CSS может уступить место быстрому эффекту изображения «до» и «после», посредством чего при перемещении мыши по контейнеру изображения откручивается одно изображение, чтобы открыть Другой.Возможно, вы видели такой эффект, реализованный с помощью JavaScript. раньше, хотя в дивном новом мире CSS3, немного изобретательности долгий путь.

Наведите указатель мыши на изображение ниже:

Приведенная выше демонстрация состоит из изображений «до» и «после», с единственным разница между ними в цвете стены. Такие изображения отличные кандидаты, которые должны быть собраны вместе и рассмотрены таким образом, театрально подчеркивая разницу между ними.

Разметка и CSS

Начнем с разметки до / после эффекта, которая состоит из внешний контейнер плюс два внутренних DIV для размещения двух изображений, соответственно:

Разметка HTML

 

Во-первых, мы стилизуем внешний контейнер « до и после », чтобы он был относительно позиционируется и с фиксированными размерами:

"до и после" контейнерный стиль

 дел.beforeandafter {/ * основной контейнер * /
фон: белый;
граница: 1 пиксель сплошного серого цвета;
дисплей: блок;
ширина: 600 пикселей; / * ширина самой большой ширины изображения * /
высота: 400 пикселей; / * высота самой большой высоты изображения * /
переполнение: скрыто;
положение: относительное; /* важный */
} 

Установка внешнего контейнера в положение « относительно » упрощает Далее, чтобы полностью разместить два внутренних DIV и заставить их закреплен относительно этого внешнего DIV. Это заставляет два DIV складываться на друг над другом.Основная магия происходит внутри стиля этих детей DIV:

«до» и «после» Стиль DIV

 div.before, div.after {/ * до и после DIV в основном контейнере * /
ширина: 100%;
высота: 100%;
верх: 0;
слева: 0;
позиция: абсолютная;
переполнение: скрыто;
переход: легкость включения-выключения всех единиц; / * CSS-переход. * /
z-индекс: 100;
}

div.after {
z-индекс: 1; / * z-индекс после div должен быть меньше, чем до * /
}

div.beforeandafter: hover div.before {/ * onmouseover основной контейнер * /
ширина: 0; / * изменяем ширину div "перед" на 0, чтобы скрыть его * /
} 

Мы позиционируем оба DIV на « absolute », чтобы заполнить всю область внешнего контейнер, при этом DIV «до» отображается сверху, манипулируя значениями z-index двух DIV.Кроме того, мы установили для DIV значение « переполнение: скрытый "; это важная часть головоломки. Сделав это, мы сможем уменьшите ширину DIV "до", не обрезая и не скрывая изображение. внутри него, чтобы постепенно раскрыть «после» DIV и его изображение. Сокращение DIV «до» реализуется благодаря этот селектор и CSS:

 div.beforeandafter: hover div.before {/ * onmouseover основной контейнер * /
ширина: 0; / * изменяем ширину div "перед" на 0, чтобы скрыть его * /
} 

Когда мышь наведена на основной контейнер, мы хотим установить ширину "до" DIV в 0.Этот переход плавный, как мы определили «переход ». свойство внутри дочерних DIV для перехода любого изменения в значениях свойств происходящие внутри них с использованием 1s длительность и временная функция « easy-in-out ».

Выход за пределы свойства «ширина»

Классический эффект «до» и «после» заставляет нас просто переходить Свойство " width ", чтобы свернуть изображение до и открыть изображение после, но это не значит, что мы не можем проявить немного творчества.В следующих примеры, давайте посмотрим результат перехода других свойств в в сочетании с " ширина " плюс другое свойство в целом, чтобы увидеть, что вид вращения, который мы можем поставить на значение по умолчанию до / после эффекта:

Итак, как вы можете видеть, просто настроив свойство CSS, которое изменяется когда мышь наведена на контейнер до / после, мы можем создать множество вариации оригинального эффекта. Последний пример выходит за рамки погрузитесь в трехмерные преобразования.

Еще одна область, в которой мы можем расширить эффект «до и после», - это придать пользователь может загружать разные наборы изображений в один и тот же контейнер, так что можно удобно сравнивать несколько наборов изображений. Посмотрим, как это сделать это на следующей странице.

CSS Галерея эффектов изображения до и после

Классное использование псевдоэлементов :: before и :: after

Должен признаться: мне нравятся псевдоэлементы :: before и :: after .

Они словно парочка приспешников в любом стильном приключении.

Как если бы никогда не приходилось сталкиваться с миром в одиночестве - везде было 1, а теперь 3.

в 3 раза больше мощности. В 3 раза больше стильных предметов. В 3 раза больше потрясающих визуальных эффектов, которые вы можете создать.

Что такое псевдоэлементы?

Теперь, если вы никогда не встречали :: before и :: after раньше, вы можете спросить: «Что это за псевдоэлемент :: before вы говорите? "

Вот 30-секундный обзор:

Псевдоэлементы - это «воображаемые» элементы, которые можно вставить в документ с помощью CSS.Например, если бы я напишите очень простой CSS:

  p :: before {
  content: «Здравствуйте!»;
}
  

Внезапно каждый элемент p на моей странице будет иметь слово «Hello», вставленное перед его содержанием. :: после псевдоэлемент аналогичен, но вместо этого идет после содержимого.

Свойство content устанавливает, что они показывают внутри себя, но эти элементы полностью настраиваются точно так же, как и любой другой элемент, поэтому на самом деле вам не нужно, чтобы внутри было текстовое содержимое.Фактически, многие из наиболее интересных применений являются полностью визуальными.

Если вам нужно более подробное введение, я рекомендую эту статью о Smashing Журнал. Для В этой статье я собираюсь меньше сосредоточиться на том, как работают псевдоэлементы, и больше на ряде удивительных примеров того, ты можешь сделать.

Тем не менее, я хочу выделить одну небольшую ошибку, потому что она доставала мне столько раз. Многие из применений, которые мы рассмотрим включают графику, но не содержат словесного содержания. Это замечательно, но вы, , должны установить и свойство content , и если ваш контент пуст, отобразить свойство , иначе псевдоэлемент не будет отображаться.Меня это много раз кусало ... так что всегда помни чтобы начать с настройки содержимого. Если ваше использование полностью наглядно, просто установите:

  содержание: "";
дисплей: встроенный блок;
  

Простое использование для :: до и :: после

Давайте начнем с простых способов использования :: before и :: after .

Пользовательские значки

Одно простое и распространенное, но очень полезное использование :: before - это добавление значков к элементам с определенным классом. Например, FontAwesome использует эту технику для реализации своих иконок.Вы можете использовать тот же подход, чтобы сделать свои собственные значки.

Now FontAwesome делает это с помощью специального шрифта и свойства content , которое имеет преимущество автоматического изменения размера в зависимости от элемента, на котором он размещен. Если мы хотим использовать изображение, нам нужно будет явно указать его размер или псевдоэлемент будет иметь размер 0 и не будет виден.

Например, если бы я хотел, чтобы каждый элемент на странице с классом .kball отображал 30x30 круг с моей аватаркой, я мог бы сделать что-то вроде этого:

См. Перо qvQJNG, автор - Кевин Болл (@kball) на CodePen.

Цитаты

Еще одно прекрасное применение :: before и :: after - это добавление кавычек вокруг кавычек. Например, мы могли бы создать "цитату" класс, который применяет двойные кавычки до и после, и даже класс атрибуции, который предшествует m-тире:

См. Перо Цитаты с использованием «До» и «После» Кевина Болла (@kball) на CodePen.

Есть еще масса дополнительных вещей, которые мы могли бы охватить как обычные применения, но я хочу перейти к некоторым из наиболее интересных вещи.Если вы хотите большего, посмотрите это статья.

Расширенное использование до и после

Создание фигур

Одна из проблем при работе в HTML и CSS - ограниченное количество «базовых» форм, с которыми вам нужно работать.

По сути, каждый элемент представляет собой прямоугольник ... и затем, умело используя радиус границы и границы, вы можете либо округлить этот прямоугольник в овал или круг, наклонить углы или создать треугольник из него. Вы, конечно, можете повернуть его, когда закончите используя преобразование , но это все…

Но теперь с :: до и :: после у вас есть в 3 раза больше «блоков» для игры.Каждый может быть трансформирован по отдельности позиционируется и вращается. Это приводит к феноменальному выбору форм, которые вы можете создать с помощью чистого CSS.

Крис Койер из CSS Tricks составил здесь отличный список возможных форм, из которых я воспроизвел свои избранный ниже, используя цветовую схему ZenDev.com. Вы не поверите, но это всего лишь 1 элемент HTML!

См. Перо Александр Футеков Инь-Ян в синем от Кевина Болла (@kball) на CodePen.

Отображение значений атрибутов

Еще одно замечательное применение псевдоэлемента :: before или :: after - это отображение содержимого атрибута.

Вы можете сделать это, установив content , чтобы включить attr ([attributename])

Например, если вы используете виджет на базе JavaScript, который хранит какое-то значение в качестве атрибута, вы можете фактически отображать этот атрибут автоматически, без необходимости использовать какой-либо JavaScript для его просмотра или просмотра!

Одно место, где я использовал это раньше, - слайдер ZURB Foundation. Ползунок работает, изменяя значение в скрытом ввод… но что, если бы мы хотели сделать текущее значение видимым на самом слайдере? Ручка, которая сейчас манипулируемый - это просто диапазон ... но он получает атрибут aria для текущего значения, aria-valuenow .Ссылаясь на это в псевдоэлементе с содержанием : attr (aria-valuenow) мы можем отобразить его прямо на дескрипторе.

См. Перо Отображение значения ползунка с использованием :: before от Кевина Болла (@kball) на CodePen.

Многоступенчатые анимации

Одно из самых интересных приложений, которые я видел, - это создание многоступенчатой ​​анимации.

Они снова используют тот факт, что псевдоэлементы дают вам целые дополнительные элементы, которыми можно манипулировать в анимация.Вы можете анимировать основной элемент в одном направлении, а затем анимировать каждый псевдоэлемент независимо.

Например, в этой статье показано, как создать причудливый эффект «блеска» на кнопке при наведении курсора (показано пером ниже).

См. Перо Эффект кнопки Sheen от Кевина Болла (@kball) на CodePen.

С этим мы могли бы сделать множество забавных вещей. для создания супер крутых микровзаимодействий. Другой пример здесь визуально скрывает содержимое слова и закручивает его при щелчке или наведении курсора.

См. Перо Word In Button Effect, автор - Кевин Болл (@kball) на CodePen.

Заключение

Существует , так что с этими псевдоэлементами можно сделать еще много , что трудно охватить все это. Вот некоторые из примеров Я нахожу особенно интересным - вам также может понравиться этот обзор на CSS-уловки - и если у вас есть какие-либо примеры, которые действительно впечатлили ВАС, свяжите меня с ними в комментариях ниже!

Создание линий границы с использованием псевдоэлементов в CSS | Автор Holly Bourneville

Фотография Aditya Chinchure на Unsplash

Вам когда-нибудь приходилось создавать границу или строку в CSS, которые не занимали бы всю ширину или высоту вашего div? Один простой способ справиться с созданием этих строк - использовать псевдоэлементы :: before и :: after.

Borders / Lines, созданные с использованием :: before и :: after

:: before и :: after псевдоэлементы, могут использоваться для вставки содержимого до и после указанного вами div. В приведенных выше случаях мы используем их для создания этих горизонтальных и вертикальных линий.

Ниже я разобью код этих границ. Если вы хотите пропустить объяснение и сразу перейти к коду - посетите мой кодовый ключ.

CSS для создания горизонтальной линии над div

На изображении выше вы можете видеть, что у меня есть вызываемый div.top-and-bottom, и я использую :: before, чтобы вставить некоторый контент перед этим div. Позиционирование является абсолютным (сам div должен иметь относительное позиционирование, чтобы контент располагался правильно). После этого CSS будет довольно простым. Подумайте о том, чтобы провести линию. Я хочу, чтобы ширина составляла около 30% от длины div, высота - 3 пикселя, и я просто располагаю строку там, где я хочу, в данном случае в верхнем левом углу div.

Для создания нижней горизонтальной линии CSS почти такой же, за исключением того, что я использую псевдоэлемент :: after (очень важный совет - у вас может быть только один элемент :: before и один :: after в div ) и измените расположение так, чтобы оно было внизу div.

CSS для создания вертикальной линии

Код на изображении выше показывает незначительные изменения, которые необходимо внести, чтобы линия была вертикальной, а не горизонтальной. В этом случае ширина составляет 3 пикселя (насколько ширина элемента), высота 90% (чуть меньше, чем сам div). Мне также нужно было изменить левую позицию, чтобы дать тексту внутри div достаточно места.

Я знаю, что эти объяснения почти не нужны, потому что они очень простые, но иногда помогает увидеть ясное объяснение CSS!

Каждая из последних двух угловых границ в моем первом изображении была создана с использованием как псевдоэлементов :: before, так и :: after вместе, e.g одну вертикальную линию с помощью :: after и одну горизонтальную линию с помощью :: before.

Расскажите, пожалуйста, о ваших любимых способах создания границ переменной длины!

Как добавить градиент к изображениям с помощью CSS :: after

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

Чтобы помочь поддерживать кодовую базу в сопровождении, решение с фоновым изображением не казалось лучшим решением.По возможности я хочу сохранить свой контент в html , а стили в css . Я не думаю, что свойство background-image для этого предназначено. Если изображение является частью содержимого, а не фоном, разделение задач говорит о том, что изображение следует поместить в html .

:: после псевдоэлемента css

Когда мне нужно было добавить градиент к изображению на этой неделе, я решил выпить чашку кофе * и подумать об этом в течение минуты, прежде чем перейти к подходу background-image .Быстрое обдумывание окупилось, когда я снова сел, чтобы попробовать то, что пришло мне в голову. :: после

TL; DR The How To

Я создал CodePen, но подумал, что объясню здесь некоторые вещи.

  • Тег нужно окружить тегом
    . Это связано с тем, что в настоящее время спецификация CSS не определяет, как именно :: after взаимодействует с заменяемыми элементами, а img является заменяемым элементом.
  • Это не поддерживается до IE 10 или ниже.канюза линейный градиент
  • Вы можете многое сделать с этим linear-gradient . Использование нескольких цветовых точек даст вам большую гибкость.
  • Для адаптации к разным размерам макетов вам может потребоваться добавить эти точки останова и отрегулировать высоту :: after .

Вопрос / ответ:

  • :: после по сравнению с : после : если вы ссылаетесь на контент, следует использовать :: . после и до являются примерами контента, тогда как активных или hover не являются контентом. :: поддерживается выше IE8, но если вам нужна поддержка IE8, вы не можете использовать linear-gradient , и, следовательно, все это не так. Я понимаю ... IE должен поддерживаться в некоторых случаях. Ваша боль реальна.
  • :: после против : до : вы можете сделать это с до , но после кажется правильным. Если вам нужен градиент сверху, то идеально подойдет до . Адаптируйте это под свои нужды.

Посмотрите, как перо добавляет градиент к изображению с помощью :: after Питера Рамсинга (@peterramsing) на CodePen.

.

Добавить комментарий

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