There's an unusual issue I've encountered... I have a simple button, nothing out of the ordinary, just a basic button like this
<button class="btn btn--error">
Button Text
</button>
Now, I want to add an image next to my button text using CSS instead of placing an img tag within the button. To achieve this, I'm utilizing the :before pseudo element, and here is my SCSS code:
.btn {
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: capitalize;
text-decoration: none;
outline: 0;
margin-bottom: 2px;
padding: 0;
&:before {
background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
background-size: contain;
content: '';
width: 18px;
height: 18px;
}
}
The image location is correct, but for some reason, it doesn't display in the browser...
https://i.stack.imgur.com/R2Goj.png
However, by adding some content to the content property within the :before pseudo element as shown below:
&:before {
background: url("/assets/images/icons/svg/ic_add_24px.svg") no-repeat top left;
background-size: contain;
content: '___';
width: 18px;
height: 18px;
}
The background image now appears!
https://i.stack.imgur.com/MZFcu.png
If you have any suggestions on how to display the background image without inserting text into the content property, your help would be greatly appreciated.