Brett Wood• 35
@woodbrettm
Posted
Using an img tag for decorative items works, just make sure you include an empty alt tag.
<img src="file-url.svg" alt="">
Without an alt tag, screen readers will read the src url to the user. Another way you can do it for example => (::before works as well)
item::after {
content: ' ';
height: 100px;
width: 50px;
background: url('relative-file-path.svg') no-repeat;
background-size: 100%;
background-position: bottom left;
position: absolute;
}
It's a bit more finicky that way as you have to explicitly set the height and width, but is sometimes useful in keeping your HTML clean.
Marked as helpful
0
