Картинка before css – CSS content

29.09.2019 Facebook Twitter LinkedIn Google+ Разное

Содержание

Псевдоэлемент ::before | CSS справочник

CSS селекторы

Значение и применение

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

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:

/* синтаксис CSS 3 */
селектор::псевдоэлемент {  /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */ 
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}

Поддержка браузерами

CSS синтаксис:

::before {
content: " ";
блок объявлений;
}

Версия CSS

CSS2

Пример использования

Рассмотрим пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования псевдоэлемента ::before</title>
<style>
img { /* выбираем все изображения */
width: 100px;  /* задаем ширину элемента */
height: 100px;  /* задаем высоту элемента */
}
div.omg::before { /* выбираем все элементы <div> с классом omg и добавляем перед каждым содержимое */
content: "Внимание! Спасибо за внимание!"; /* содержимое, которое будет добавлено */
} 
p::before { /* выбираем все элементы <p> и добавляем перед каждым содержимое */
content: "Ответ: "; /* содержимое, которое будет добавлено */
} 
</style>
</head>
	<body>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<div class = "omg">
			<img src = "nich.jpg" alt = "nich">
		</div>
		<p>Нет</p>
		<p>Да</p>
	</body>
</html>

В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота

100 пикселей). Кроме того, мы выбрали все элементы <div> с классом omg и добавили перед ними определенную фразу. Перед абзацами (элементы <p>) также добавляется определенная фраза.

Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::before применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.

Результат нашего примера:

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

Изменение цвета маркера через использование CSS свойства content и псевдоэлемента :before:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Изменение цвета маркера.</title>
<style> 
ul {
list-style : none; /* убираем маркеры у маркированного списка */
}
li:before
 
 {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <li> */
content : "•"; /* вставляем содержимое, которое выглядит как маркер */
padding-right : 10px; /* устанавливаем правый внутренний отступ элемента. */
color : red; /* устанавливаем цвет шрифта */
}
</style>
</head>
<body>
<ul>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
	<li>Элемент списка</li>
</ul>
</body>
</html>
Изменение цвета маркера через использование CSS свойства content.

Пример использования счетчиков в CSS через использование CSS свойств content, counter-reset, counter-increment и псевдоэлемента :before:.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример использования счетчиков в CSS.</title>
<style> 
body {
counter-reset : schetchik1; /* инициализируем счетчик №1 */
line-height : .3em; /* устанавливаем междустрочный интервал для всего документа */
}

 h3 {
counter-reset : schetchik2; /* инициализируем счетчик №2 */
}
h3:before { /* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h3> */
counter-increment : schetchik1; /* определяем инкремент для глав с шагом 1 (значение по умолчанию) */
content : "Глава № " counter(schetchik1) ". "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h3>. Значение counter определяет счетчик   */
}
h4 {
margin-left : 20px; /* устанавливаем величину отступа от левого края элемента */
}
h4:before {/* Псевдоэлемент :before добавляет содержимое, указанное в свойстве content перед каждым элементом <h4> */
counter-increment : schetchik2; /* определяем инкремент для статей с шагом 1 (значение по умолчанию) */
content : counter(schetchik1) "." counter(schetchik2) " "; /* указываем, содержимое, которое будет добавлено перед каждым элементом <h4>. Значение counter определяет счетчик   */
}
</style>
</head>
	<body>
		<h3>Название главы</h3>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h3>Название главы</h3>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h3>Название главы</h3>
		<h4>Статья</h4>
		<h4>Статья</h4>
		<h4>Статья</h4>
	</body>
</html>
Пример использования счетчиков в CSS (свойства counter-reset и counter-increment).

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

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример добавления кавычек к тексту в CSS</title>
<style> 

 * {
quotes : "«" "»" "‹" "›"; /* используя универсальный селектор устанавливаем тип кавычек для первого и второго уровня вложенности (для всех элементов) */
}
p:before {content : open-quote;}  /* используя псевдоэлемент :before добавляем перед элементом <p> открывающиеся кавычки */
p:after {content : close-quote;}  /* используя псевдоэлемент :after добавляем после элемента <p> закрывающиеся кавычки */
</style>
</head>
	<body>
		<q>Обычная цитата<q>
		<q>Это <q>ЦИТАТА</q> внутри цитаты</q>
		<p>Параграф, к которому, используя псевдоклассы добавлены кавычки.</p>
	</body>
</html>
Пример добавления и изменения кавычек в тексте.CSS селекторы

basicweb.ru

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

Stack Overflow на русском
  2. 0
  3. +0
    • Тур Начните с этой страницы, чтобы быстро ознакомиться с сайтом
    • Справка Подробные ответы на любые возможные вопросы
    • Мета Обсудить принципы работы и политику сайта
    • О нас Узнать больше о компании Stack Overflow
    • Бизнес Узнать больше о поиске разработчиков или рекламе на сайте
  6. Войти Регистрация

  7. текущее сообщество

    • Stack Overflow на русском справка чат

ru.stackoverflow.com

Популярно о псевдоэлементах :Before и :After / Habr

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

Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.

Синтаксис и поддержка браузерами


Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:

Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

Пример использования псевдоэлементов
<p>  
<span>:before</span>   
    Это основной контент.
<span>:after</span>  
</p>

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

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


Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.

Простой пример: необходимо добавить кавычки для цитаты:

blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}
Стилизация псевдоэлементов

К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
}

Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить display: block:

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    /** define it as a block element **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    /** define it as a block element **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}

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

blockquote:before {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -3px -3px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -1px -32px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}

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

Использование вместе с псевдоклассами

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:

blockquote:hover:after, blockquote:hover:before {  
    background-color: #555;  
}
Добавление transition-эффекта

Также можно применить свойство transition для плавного изменения цвета кавычек:
transition: all 350ms;  
-o-transition: all 350ms;  
-moz-transition: all 350ms;  
-webkit-transition: all 350ms;

К сожалению, это нормально работает только в последних версиях Firefox.

Посмотреть демонстрацию примера из этой статьи.

Немного вдохновения


Три примера использования псевдоэлементов :before и :afte:
Fascinating Shadows

3D Button

Stacked Image Effect

habr.com

CSS-трюк с background-image — Aimweb.name

Довольно интересное применение псевдо-элемента :before показал Nicolas Gallagher в своем блоге. Плюс в том, что мы избавляемся от лишних презентационных элементов в теле документа и выносим их в CSS.
В коде это выглядит так:

#content {
  position:relative;
  z-index:1;
  background:#4B92C0;
}
#content:before {
   content:»»; /*вместо того, чтобы создавать div с фоном и позиционировать внутри родительского блока*/
   position:absolute;
   z-index:-1;
   bottom:10px;
   right:10px;
   width:500px;
   height:300px;
   background:url(image.jpg);
}

А в теле документа при этом никаких дополнительных элементов:

Пример по ссылке.
(поддерживается браузерами: Firefox 3.5+, Opera 10+, Safari 4+, Chrome 4+, IE 8+)

Псевдо-фон из спрайта

Также показан интересный прием при работе со спрайтами: фоновое изображение подрезается по размерам псевдо-элемента.

.someclass a:before {
   content:»»;
   float:left;
   width: 24px; /*эти размеры определяют область, которая будет «вырезана» из спрайта*/
   height: 24px;
   margin:0 5px 0 0;
   background:url(sprite.png);
}
.class1 a:before {background-position:0 -24px;}
.class2 a:before {background-position:0 -48px;}
.class3 a:before {background-position:0 -72px;}
.class4 a:before {background-position:0 -96px;}

В теле документа это выглядит таким образом:

<ul>
   <li><a href=»#»>Ссылка раз</a></li>
   <li><a href=»#»>Ссылка два</a></li>
   <li><a href=»#»>Ссылка три</a></li>
   <li><a href=»#»>И у каждой свой фон</a></li>
</ul>

Пример в новом окне.

aimweb.name

Псевдоэлемент ::before | CSS | WebReference

Псевдоэлемент ::before применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

По умолчанию ::before создаёт строчный элемент.

Синтаксис ?

Селектор::before { content: "текст" }

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#
×

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li::before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента ::before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Рис. 1. Использование псевдоэлемента ::before в списках

Примечание

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

:before8121441
::before9125741.5
 
:before1141
::before1171

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

webref.ru

Псевдоэлемент :before | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+4.0+9.21.0+1.0+3.5+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Для :before характерны следующие особенности.

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

Синтаксис

элемент:before { content: «текст» }

Значения

Нет.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>before</title>
  <style>
   li:before {
     content: "¶ "; /* Добавляем желаемый символ перед элементом списка */ 
   }
   li {
     list-style: none; /* Убираем исходные маркеры */ 
   }
  </style>
 </head>
 <body>
   <ul>
     <li>Альфа</li>
     <li>Бета</li>
     <li>Гамма</li>
   </ul>
 </body>
</html>

В данном примере вместо стандартных маркеров списка с помощью псевдоэлемента :before выводится символ ¶. Результат примера продемонстрирован на рис. 1.

Рис. 1. Использование псевдоэлемента :before в списках

Браузеры

Opera 9.2 учитывает все пробелы, как если бы они были заключены в тег <pre>.

Браузер Firefox до версии 2.0 включительно нестабильно работает с позиционированными элементами, а также не применяет :before к тегу <fieldset>.

Firefox до версии 3.5 не допускает применение к :before свойств position, float, list-style-type и некоторых значений display.

htmlbook.ru

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

В этой статье вы узнаете историю возникновения и использования псевдоэлементов after и before в CSS. Рассмотрим несколько примеров, где они активно используются.

Для вывода не семантического контента

Для примера возьмем список продуктов, где каждая новая строка начинается со знака +, который повторяется и не несет никакой смысловой нагрузки, а служит только украшением.

<ul>
<li>+ сахар</li>
<li>+ молоко</li>
<li>+ мука</li>
</ul>

Разработчики спецификации CSS для упрощения кода, придумали псевдоэлементы, такие как after и before.

li {
   list-style-type: none; /* Убираем маркеры */
}

Появилась возможность, в начале каждого элемента <li> выводить повторяющийся контент content: «+ «, не прописывая его реально в HTML-файле, а только в файле стилей. Эта запись буквально говорит, поставь плюс в начале каждого элемента списка.

li:: before {
   content: "+ ";
}

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

li:: after {
   content: "? ";
}

В HTML-разметке, нет никаких знаков.

<ul>
<li>сахар</li>
<li>молоко</li>
<li>мука</li>
</ul>

На странице, мы увидим:

  • + сахар ?
  • + молоко ?
  • + мука ?

Верстальщики оценили открывающиеся перспективы с внедрением псевдоэлементов before и after в CSS спецификации и начали активно применять в проектах, изобретая интересные приемы.

Таким образом первоначальная идея появления псевдоэлементов before и after – добавление контента в начале и в конце элемента, превратилась в широко используемый инструмент верстальшика.

Отмена действия float для последующего блока

Рассмотрим такой пример:

<article>
   <img src="http://via.placeholder.com/200x150" alt="картинка статьи">
   <p>Текст статьи</p>
</article>
   <footer>
     Подвал сайта
   </footer>

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

img {
float: left;
}

Напрашивается, под блок статьи, вставить фейковый блок, который бы отменил действие обтекания для подвала. Однако можно это не делать по настоящему, дабы не портить HTML-разметку, а прописать только в стилях.

Для тега footer в стилях – прописываем псевдоэлемент (воображаемый элемент) before (перед). Код ниже говорит – до блока footer, якобы выводится некий контент табличного вида , на который действие обтекания отменяется clear: both;

footer::before {
content: " ";
clear: both;
display: table;
}

Почему в коде, где применяются after и before, всегда присутствует пустой content: » «? Дело все в том, что разработчики CSS не предполагали, что находчивые верстальщики, будут использовать псевдоэлементы в декоративных или фейковых целях , поэтому пустой content: » «, просто должен быть в коде, без него все эти хитрости не будут работать. Ведь псевдоэлементы создали именно для добавления контента в начало и конец.

Font Awesome – вставка иконок помощью псевдоклассов ::before и ::after

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

Шаг 1

Скачиваем с сайта https://fontawesome.ru/ иконочный шрифт и подключаем к своему сайту через файл CSS.

Шаг 2

Делаем HTML-разметку

<ul>
<li>Биткойн</li>
<li>Доллар</li>
<li>Евро</li>
<li>Рубль</li>
</ul>

Шаг 3

Делаем для наглядности CSS оформление

Шаг 4

На сайте fontawesome.ru выбираем нужные иконки.

Шаг 5

Копируем цифровой код в Unicode.

Шаг 6

Задаем стили для иконочного шрифта.

li:before {
font-family: fa;
padding-right: 5px;
}
.bitcoin:before {
content: "\f15a";
}
.dollar:before {
content: "\f155";
}
.euro:before {
content: "\f153";
}
.rub:before {
content: "\f158";
}

Готовый результат

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

Если, после прочтения данной статьи все ещё остаются вопросы, то рекомендую пройти этот «видеокурс».

  • Создано 21.05.2018 11:26:30
  • Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

myrusakov.ru

Comments
Leave Comment