Пожалуйста, объясните: content: '';

Вот код, у меня есть вопрос оПожалуйста, объясните: content: '';

.store { 
    display: block; 
    position: relative; 
} 
.store:before, .store:after { 
    display: block; 
    position:absolute; 
    content:''; 
} 
.store:before { 
    background: url(store-before.png); 
    height: 23px; 
    width: 54px; 
    top:-3px; 
    left:-3px; 

} 
.store:after { 
    background: url(store-after.png); 
    height: 20px; 
    width: 41px; 
    bottom:-3px; 
    right:-3px; 
}

Я заметил, что, когда «содержание» что-нибудь, кроме двух апострофов до и после изображения не отображаются. Может ли кто-нибудь объяснить смысл двух апострофов? Благодарю.

источник

2013-09-04 macsplean

Возможный дубликат HTTP : //stackoverflow.com/questions/18530671/css-before-and-after-pseudo-elements-content-property – Nitesh

Это пустая строка, заполняющая пустое пространство –

** Пустая строка ** без этого ваши псевдо стили не будут работать. – Praveen

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

Если между двумя разделителями строк нет ничего, либо '', либо "", тогда у вас есть пустая строка. Если у вас есть что-то помимо строки, это другое значение, которое может быть или не быть действительным. См. here для всех возможных значений для content. Если вы передадите недопустимое значение, то, как и любое другое объявление стиля, браузер проигнорирует его, и без какого-либо действительного значения content по умолчанию будет normal, что действительно none для :before и :after псевдоэлементов. Это предотвратит отображение вашего псевдоэлемента.

источник

2013-09-04 09:52:31 BoltClock

Generated content, automatic numbering, and lists раздел спецификации CSS2.1 объясняет это:

Авторы задают стиль и местоположение генерируемого содержимого с: до и: после псевдо-элементов. Как показывают их имена, псевдо-элементы: before и: after определяют местоположение содержимого до и после содержимого дерева документа элемента. Свойство «content», в сочетании с этими псевдоэлементами, указывает, что вставлено.

content - это то, что добавлено на страницу. Если нет content, ничего не добавляется на страницу (это означает, что в конечном итоге не применяется стиль). content: '' добавляет пустое содержимое строки на страницу.

источник

2013-09-04 09:51:59

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

Если вы удалите свойство контента, то оно вообще не будет отображаться.

Его предназначение должно использоваться для таких вещей, как «...» или «читать больше». Я полагаю, что без необходимости иметь это в своей разметке html.

источник

2013-09-04 09:52:53 Owen

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

Как когда-либо вы можете использовать его, чтобы положить повторив содержание рядом с элементами, как так:

span:before{ 
content:"Author: " 
} 
<span>Huckleberry Finn</span>

приведет к:

Автор: Гекльберри Финна

источник

2013-09-04 09:53:25 raam86

ответ

Смежные вопросы