我可以使用CSS向任何元素添加项目符号吗？
我可以使用CSS向任何元素添加项目符号吗？
提问于 2015-08-17 04:55:04
很简单的问题，但我不确定这是否可能。我想在所有<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>元素。我真的不想在<h1>元素之前粘贴<span>元素。有什么想法吗？
回答 7
Stack Overflow用户
发布于 2015-08-17 04:58:58
您可以使用伪选择器:before在标记之前添加任何您想要的东西。
h1:before {
content: "- "
}<h1>My H1 text here</h1>
Stack Overflow用户
发布于 2015-08-17 05:02:31
像这样的东西应该是可行的
h1, h2, h3 {
background: url("the image link goes here") 0 center no-repeat;
padding-left: 15px; /* change this to fit your needs */
}Stack Overflow用户
发布于 2018-04-03 19:55:11
为段落或任何元素指定一个类名，并应用以下代码(我已将类名指定为bullet)：
.bullet::before {
content: '';
position: absolute;
bottom: 7px;
left: -10px;
width: 3px;
height: 3px;
background-color: #000;
border-radius: 50%;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32039846
复制相关文章
相似问题