Могу ли я использовать CSS для добавления маркера к любому элементу?

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

<span class='bullet'></span><h1>My H1 text here</h1>

с помощью css:

.bullet{
    background: url('bullet.png') no-repeat;
    display:inline-block;
    vertical-align: middle;
    background-size:100%;
    height:25px;
    width:25px;
    margin-right: 5px;
}

но есть ли автоматический способ сделать то же самое? Я думал что-то вроде:

h1{
    list-style-image: url('bullet.png');
}

но это работает только с элементами <ul>. Я действительно не хочу вставлять элемент <span> всюду перед элементом <h1>. Любые идеи?

Ответы

Ответ 1

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

Чтобы сделать ваш элемент как (1) похожим на маркер, так и (2) вести себя как маркер, вы должны установить атрибуты display, list-style-type и list-style-position этого элемента.

ПРИМЕР КОДА

h1 {
    display: list-item;          /* This has to be "list-item"                                               */
    list-style-type: disc;       /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type     */
    list-style-position: inside; /* See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position */
}

<h1>My H1 text here</h1>

Ответ 2

Вы можете сделать что-то вроде этого:

h1:before {
    content:"• ";
}

См. Fiddle:

http://jsfiddle.net/6kt8jhfo/6/

Ответ 3

Вы можете использовать псевдоселектор :before, чтобы добавить что-либо, что вы хотите, перед тегом.

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

Ответ 4

Что-то вроде этого должно работать

h1, h2, h3 {
  background: url("the image link goes here") 0 center no-repeat;
  padding-left: 15px; /* change this to fit your needs */
}

Ответ 5

Самый простой способ создать пулю с использованием css - использовать семейство шрифтов... таким образом, нет необходимости включать графику и т.д.

вот код класса:

.SomeClass:before {
  font-family: "Webdings";
   content: "=  ";

{

Ответ 6

Нет, list-style и list-style-image предназначены только для тегов ul и ol, вам придется вернуться к вашему первому методу или сделать что-то с помощью js

http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/cssref/pr_list-style-type.asp

Ответ 7

list-style-type зарезервирован только для ul. Вы можете использовать <h1 class="bullet"> с псевдоэлементом :before.

Ответ 8

Просто используйте <p>• </p>, чтобы создать точку перед словом