Question

非常简单的问题，但我不确定它是否可行。我想添加一个图像作为所有for (int i = kolicinaBrojeva - 1; i >= 0; i--) { if (niz[i] < max && niz[i] > min) { Console.Write(niz[i] + ", "); } }元素中的子弹。我知道我可以通过以下方式实现这一目标：

<h1>

用css：

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

但有一种自动方式做同样的事情吗？我想的是：

.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>元素。有什么想法吗？

Answer 1

你可以这样做：

h1:before {
    content:"• ";
}

见小提琴：

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

Answer 2

虽然您可以使用: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>

THE FIDDLE

<强> http://jsfiddle.net/L15a53cb/

Answer 3

您可以使用伪选择器:before在标记之前添加任何内容。

h1:before {
    content: "- "
}

<h1>My H1 text here</h1>

Answer 4

这样的事情应该有效

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

Answer 5

使用before css创建项目符号的简单方法是使用字体系列...这样就不需要包含任何图形等。

这是类代码：

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

{

Answer 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

Answer 7

list-style-type仅限ul。您可以将<h1 class="bullet">与伪元素:before一起使用。

Answer 8

为段落或任何元素指定一个类名，并应用以下代码（我已将班级名称命名为bullet）：

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

Answer 9

如果您想调整点的大小、颜色和位置，您可以这样做：

 .bullet:before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    display: inline-block;
    background-color: #29cf00;
    vertical-align: middle;
}

Answer 10

只需使用 <p>• </p>在您的单词前面创建一个点

我可以使用CSS为任何元素添加项目符号吗？

10 个答案:

示例代码

THE FIDDLE