CSS: как добавить пробел перед содержимым элемента?
Не выполняется следующий код :
p:before { content: " "; }
p:before { content: " "; }
как добавить пробел перед содержимым элемента ?
Примечание: мне нужно покрасить границу слева и поле слева для семантического использования и использовать пространство как бесцветное поле. :)
4 ответов
вы можете использовать unicode не разрывного пространства:
p:before { content: "a0 "; }
посмотреть демо JSfiddle
[стиль улучшен @Jason Sperske]
не пукайте с вставкой пробелов. Во-первых, более старые версии IE не будут знать, о чем вы говорите. Кроме того, есть более чистые способы вообще.
для бесцветных отступов используйте text-indent
собственность.
p { text-indent: 1em; }
Edit:
Если вы хотите, чтобы пространство было окрашено, вы можете добавить толстую левую границу к первой букве. (Я бы почти-но-не-совсем сказал "вместо", потому что отступ может быть проблемой, если вы используете оба. Но мне кажется грязным полагаться только на границу отступа.) Вы можете указать, как далеко и как широко цвет использует левое поле/отступ/ширину границы первой буквы.
p:first-letter { border-left: 1em solid red; }
поскольку вы ищете добавление пространства между элементами, вам может понадобиться что-то простое, как поле слева или заполнение слева. Вот примеры обоих http://jsfiddle.net/BGHqn/3/
это добавит 10 пикселей слева от элемента абзаца
p {
margin-left: 10px;
}
или если вы просто хотите, чтобы некоторые отступы в абзаце элемент
p {
padding-left: 10px;
}
/* Most Accurate Setting if you only want
to do this with CSS Pseudo Element */
p:before {
content: "a0";
padding-right: 5px; /* If you need more space b/w contents */
}