将子弹添加到果园中的标头标签

Question

我在果园中创建了列表，而h1标签则列出了列表的标题。我需要为标题添加一个子弹。

我需要在h1标签之前使用子弹，如下图所示

http://jsfiddle.net/nRq27/1/

 <header>
    <h1>School info</h1>
  </header>

我使用了background：image属性，但它没有显示子弹。我怎么能得到子弹？

Answer 1

尝试：

h1:before {
    background-image: url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
    background-repeat: no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    display: inline-block;
    content:"";
    vertical-align: middle;
}

Updated fiddle here.

Answer 2

添加以下css

h1:before{
  content: '\2022';
  margin:0 10px  
}

<强> DEMO

Answer 3

<强> HTML

<header>
    <ul>
        <li><h1> School Info </h1> </li>
    </ul>
</header>

<强> CSS

   li
{
    list-style-type:square;
    font-size:small;
}
h1
{
 color: #3E5DA3;
    font-size: 12px;
    padding-bottom: 10px;
    font-weight: bold; 
}

Fiddle Demo Here

Answer 4

<header>
    <h1> 
        <ul> 
            <li> School info </li>
         </ul>
    </h1>
</header>

http://jsfiddle.net/8qcXf/

输出

    

        

            
• 学校信息