html - Can I use CSS to add a bullet point to any element? -
pretty simple question, not sure if possible. want add image act bullet in <h1>
elements. know can achieve by:
<span class='bullet'></span><h1>my h1 text here</h1>
with 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 there automatic way same thing? thinking like:
h1{ list-style-image: url('bullet.png'); }
but seems work <ul>
elements. don't want have paste <span>
element everywhere before <h1>
element. ideas?
while can use :before
pseudo-selector add "-" or "•" character in front of element, doesn't make element behave bullet point. element may bullet point, that's dirty hack, really, , should avoided!
to make element both (1) bullet point , (2) behave bullet point, should set display
, list-style-type
, list-style-position
attributes of element.
example code
h1 { display: list-item; /* has "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>
Comments
Post a Comment