Can anyone help me with inserting the following CSS into HTML?
Here is the CSS snippet that needs to be converted to HTML:
.group .circular-progress::before {
...
content: "10%";
...
}
This is what I have attempted so far:
<div class="group">
<div class="circular-progress" style="content: '10%'"></div>
</div>
I'm having trouble with the ::before element and the issues with single quotes not working.
UPDATE:
The code now functions correctly, but a new problem related to Ruby has emerged.
<% if @goals.empty? %>
<%= "You don't have any goals entered yet." %>
<% else %>
<% @goals.each do |g| %>
<% puts g.value %>
<style>.group .circular-progress::before {content: "<%= g.value %>%";}</style>
<div class="group">
<div class="circular-text"><%= g.name %></div>
<div class="circular-progress" style="background: linear-gradient(90deg, #e0e0e0 50%, transparent 50%, transparent), linear-gradient(270deg, #ff70a6 50%, #e0e0e0 50%, #e0e0e0);"></div>
</div>
<% end %>
<% end %>
In the section where I am displaying the g.value, it shows the correct input. For example - if the values are [50, 10, 100, 40], it displays them correctly. However, when adding a new element to the @goals array, it replaces the style content attribute, causing it to display 40 on the webpage for all four instances. Adding 30, for instance, makes it show 30 for all five occurrences, and so on.