it-swarm.com.ru

Могу ли я использовать 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>. Есть идеи?

27
Sablefoste

Хотя вы можете использовать псевдо-селектор :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>


Скрипка

http://jsfiddle.net/L15a53cb/

36
John Slegers

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

h1:before {
    content:"• ";
}

См. Fiddle:

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

34
sinisake

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

h1:before {
    content: "- "
}
<h1>My H1 text here</h1>

6
AleshaOleg

Как то так должно работать

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

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

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

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

{

1
Who Knows

Дайте имя класса абзацу или любому элементу и примените следующий код (Я дал имя класса как bullet):

.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
0
user8523590

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

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

0
Ahmad

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

0
mwl