Issue
So I have an unordered list with custom bullet images. They are triangles pointing to the right at the list. I would like the point to be aligned with the vertical center of the first line of text in the list item. How can I achieve this?
This is what I am currently viewing:
main ul {
list-style-image: url(../img/bullet.png);
margin-top: 25px;
}
main ul li {
line-height: 35px;
}
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
The line-height doesn't seem to do anything.
Solution
you can use pseudo-element before
\ after
instead, take a look at this example below:
main ul {
margin-top: 25px;
}
main ul li {
list-style: none;
}
main ul li:before {
content: url("http://www.milksmarter.co.nz/images/basement_platform/grey_triangle_bullet_point_large.png");
position: relative;
top: 10px;
left: -10px
}
<main>
<ul>
<li>Photography for events and portraits</li>
<li>Image editing and restoration</li>
<li>Video and audio production</li>
</ul>
</main>
Answered By - dippas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.