Is there a way to display an image in a CSS :before element?
.withimage:before {
content: url(path/to/image.svg);
display: block;
height: 20px;
width: 20px;
}
I'm facing an issue where the height and width properties are applied to the element, but the SVG image does not scale down accordingly. How can I ensure that these sizes are actually applied to the element created by before?
Check out this Plnkr example for reference: https://plnkr.co/edit/UgryaObojs6PCU579oGY
To incorporate svg into your design as a background image, you can follow this code snippet:
.withimage:before {
content: "";
display:block;
height:125px;
width:125px;
background-size: 125px 125px;
background-image: url(test.svg);
background-repeat: no-repeat;
}
Check out this example for reference.
Additionally, another option you can explore is using the following code:
.withimage:before {
content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
display:block;
height:20px;
width:20px;
}
Applying a scale transform was successful in my case:
::before {
content: url(path/to/image.svg); // initial image size is 24px wide
transform: scale(0.5); // resulting image will be displayed at 12px width
}
Many browsers do not support the use of :after and :before on img tags, but a workaround is to create a div with height and width and apply a background to it.
Check out this Plunker for editing
/* Add your styles here */
.withimage:before {
content:"";
background: url(test.svg);
background-size: cover;
display: block;
width:20px;
height: 10px;
}
.withimage{
background: pink;
height: 100px;
width: 100px;
}
There are instances where background images may not be the ideal choice for various reasons. I encountered a similar issue to yours, where no matter the dimensions of the SVG, it would not apply correctly. The culprit was the absence of a viewBox in the SVG.
Simply adding viewBox='0 0 16 16' within the SVG content resolved the issue instantly!
Instead of using a separate editor, simply make changes to the SVG file:
<svg width="20px" height="20px"
Visit my CodePen For this particular layout, I need to use only CSS. The columns are structured like so: <div class="col-md-12 no-border no-padding"> <h2 class="heading upper align-center">Headline</h2> <p class="subheading lower ...
I've developed a nested CSS class for an ordered list on my website, but I'm encountering a problem where each list item is appearing in different font sizes even though I have specified the font size. .number_list ol { font:normal 1.2em ...
My goal is to create a responsive website that accurately displays an object with specified dimensions, such as a width of 100mm, regardless of the user's screen resolution. However, I am facing challenges in achieving this consistency across all devi ...
I am currently facing an issue with accessing elements that are automatically added by a library in my code. In my HTML, I have the following line: <div class="bonds" id="original" style="display:block;"></div> The library appends some elemen ...
I'm looking to add a simple hover effect to the images AboutUsLink.png and AboutUsColourLink.png, but I'm unsure of the process. Here is the HTML code: <section class="link1"> <a href="#SecondLink"><img src="images/LogoAndLin ...
I am currently in the process of developing a test drop-down menu. The open menu button functions correctly, however, the close button is unresponsive to clicking or hovering actions. Upon clicking the open menu button, it should make the other button visi ...
I've noticed that most of the questions I've come across are related to WordPress or Bootstrap nav bars, which I'm not familiar with. I've created mine using CSS. I want to enhance my navigation bar for mobile users by making the butto ...
Feeling a bit stuck with this problem and hoping for some help. I did some searching on SO but couldn't find a solution that fits my needs. Below is a snippet of the markup I'm working with: <div id="wrapper"> <div id="content"> ...
I've been struggling to find a solution to this issue. My goal is to align the centered elements between two lines, similar to what Bootstrap's documentation shows. There doesn't appear to be any excess margin or padding causing alignment is ...
I have some XML data that I want to display on my website, but I'd prefer to show it in a styled format like a bootstrap table. However, I'm not sure how to go about doing this. Here's an example of the XML: <?xml version="1.0" encoding ...
There seems to be an issue with the div tag not functioning properly inside a table definition: <table> <tr></tr> <div id="choice"><tr> <td>-------</td> <td>-------</td> <td>-------</td> &l ...
As a beginner in Angular, I am seeking some guidance and examples. In my code, there are two divs. One is created using ng-repeat with an ng-click function to detect the clicked item. The other div below has CSS properties like style="width:100px; float ...
I have created a code to add image captions to different div blocks, and it works as intended. However, I am looking for ways to optimize the code and make it shorter. If you have any advice on how to improve it, please let me know! Thank you in advance. ...
I have a situation where I need to adjust the height of a cell in a table. One of the cells contains a larger element that causes the row to expand vertically. I also have another cell with a div element set to 100% of the cell's height. However, I wa ...
I'm having some trouble connecting my CSS to my HTML. This is the structure of my folders: Here is my HTML code: I've tried several methods to make it work. Interestingly, everything works fine on index.html. I even tried opening the HTML fi ...
#header { height: 108px; width: 1140px; background-color: #faa220; position: relative; } #Logo2 { height: 108px; float: left; } #header links { height: 50px; float: left; list-style: none; padding-top: 10px; } #container { overflo ...
I ran into an issue with my code, shown in the image below. I am trying to position 1 on the left and 2 on the right, but something seems off. Can you spot the problem? <div className="mt-5 mx-5 py-3 shadow bg-white"> &l ...
I attempted to create a centered horizontal menu on my webpage but the 'div align=center' attribute is not functioning correctly. .nav ul { display: block; list-style-type: none; margin: 0; position: absolute; } .nav li { display: in ...
Since upgrading Vuetify from version 1.1.9 to 1.2.3, I have encountered a strange issue where all of my dividers appear much darker than before and different from the examples in the documentation. This is how it should look: https://i.sstatic.net/GnxzV. ...
I'm struggling with positioning my custom arrow in select elements. Each select has a different width, and I need to ensure that the distance from the right edge of the select to the arrow is consistent across all of them. Currently, I am using backg ...