Html 我可以使用 CSS 为任何元素添加项目符号吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32039846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use CSS to add a bullet point to any element?
提问by Sablefoste
Pretty simple question, but I am not sure if it is possible. I want to add an image to act as a bullet in all <h1>elements. I know I can achieve this by:
很简单的问题，但我不确定是否可能。我想添加一个图像作为所有<h1>元素中的项目符号。我知道我可以通过以下方式实现这一目标：
<span class='bullet'></span><h1>My H1 text here</h1>
with css:
使用 CSS：
.bullet{
background: url('bullet.png') no-repeat;
display:inline-block;
vertical-align: middle;
background-size:100%;
height:25px;
width:25px;
margin-right: 5px;
}
but is there an automatic way to do the same thing? I was thinking something like:
但是有没有一种自动的方法来做同样的事情？我在想这样的事情：
h1{
list-style-image: url('bullet.png');
}
but that only seems to work with <ul>elements. I really don't want to have to paste the <span>element everywhere before the <h1>element. Any ideas?
但这似乎只适用于<ul>元素。我真的不想在<span>元素之前到处粘贴<h1>元素。有任何想法吗？
回答by John Slegers
While you can use a :beforepseudo-selector to add a "-" or "?" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!
虽然您可以使用:before伪选择器添加“-”或“？” 元素前面的字符，它并没有真正使您的元素表现得像一个项目符号。您的元素可能看起来像一个要点，但这只是一个肮脏的黑客，真的，应该避免！
To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display, list-style-typeand list-style-positionattributes of that element.
为了使您的元素 (1) 看起来像一个项目符号并且 (2) 表现得像一个项目符号，您应该设置该元素的display,list-style-type和list-style-position属性。
EXAMPLE CODE
示例代码
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
小提琴
回答by sinisake
You could do something like this:
你可以这样做：
h1:before {
content:"? ";
}
See Fiddle :
见小提琴：
回答by AleshaOleg
You can use pseudo-selector :beforeto add anything what you want before your tag.
您可以使用伪选择器:before在标签之前添加任何您想要的内容。
h1:before {
content: "- "
}<h1>My H1 text here</h1>回答by Ben
Something like this should work
这样的事情应该工作
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}
回答by shekhar677
Give a class name to the paragraph or any element and apply the below code
(I have given class name as bullet):
为段落或任何元素指定一个类名并应用以下代码（我已将类名指定为bullet）：
.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}
回答by Who Knows
The very simple way to create a bullet using the before css is to utilize the font family ... this way there is no need to include any graphics and etc.
使用 before css 创建项目符号的非常简单的方法是利用字体系列……这样就不需要包含任何图形等。
here is the class code:
这是课程代码：
.SomeClass:before {
font-family: "Webdings";
content: "= ";
{
{
回答by mwl
list-style-typeis reserved for ulonly.
You can use <h1 class="bullet">with pseudo-element :before.
list-style-type仅供ul参考。您可以<h1 class="bullet">与伪元素一起使用:before。
回答by Ahmad
Nope, list-styleand list-style-imageare only for uland oltags you'll have to get back to your first method or make something with js
不， 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
http://www.w3schools.com/css/css_list.asp http://www.w3schools.com/cssref/pr_list-style-type.asp
回答by Rudy Pramana
Just use
<p>• </p>to create a dot in front of your word
只是用来
<p>• </p>在你的单词前面创建一个点
