Menu
Firstly, you need to create the List Item using a li list item tag. Within that List Item tag, you can place your image. You add an image within the Image tag img. Hope this helps explain it a bit better.
The attribute is used with the HTML <ul> tag, with the CSS property list-style-image to add image bullets to an unordered list. The URL property sets the image source for the list item.
You could also insert an image by using an empty string for the content, making it display: block in some way, sizing it, and using background-image . That way you could re-size it with background-size .
Use float:left on both list and image, to align the image next to the list. As shown by the following snippet. REMARKS Directly import bootstrap, for Responsive Web Page.
The easier way to do it is just:
ul li:after {
content: url('../images/small_triangle.png');
}
Try this:
ul li a:after {
display: block;
content: "";
width: 3px;
height: 5px;
background: transparent url('../images/small_triangle.png') no-repeat;
}
You need the content: ""; declaration to give your generated element content, even if that content is "nothing".
Also, I fixed the syntax/ordering of your background declaration.
For IE8 support, the "content" property cannot be empty.
To get around this I've done the following :
.ul li:after {
content:"icon";
text-indent:-999em;
display:block;
width:32px;
height:32px;
background:url(../img/icons/spritesheet.png) 0 -620px no-repeat;
margin:5% 0 0 45%;
}
Note : This works with image sprites too
I think your problem is that the :after psuedo-element requires the content: property set inside it. You need to tell it to insert something. You could even just have it insert the image directly:
ul li:after {
content: url('../images/small_triangle.png');
}
ul li + li:before
{
content:url(imgs/separator.gif);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With