How do I insert quotes inside inline CSS?

Question

How do I insert the CSS below into HTML?

Here is the CSS that I would like to convert to HTML:

.group .circular-progress::before {
  ...
  content: "10%";
  ...
}

Here's what I've tried to do:

<div class="group">
    <div class="circular-progress" style="content: '10%'"></div>
</div>

What's throwing me off is the ::before element, or the fact that the single quotes aren't working.

UPDATE:

It now works with the below code, but am getting a new Ruby-related issue.

<% 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 %>

On the line where I am putting the g.value, it is storing the correct input. For example - if the values are [50, 10, 100, 40], it is printing them correctly. However, each time I add a new element to the @goals array, it overrides the style content attribute, so it is showing 40 on the webpage all four times. If I add 30 for example, it shows 30 all five times, etc.

Just a guess but you could search up what the escape character is for a double quote. Also, you seem to be missing a double quote somewhere, you only have 3 right now which is incomplete. — faris, Feb 12 '19 at 02:31
I just wanted to point out that the CSS selector `.group .circular-progress::before` does not look like it is actually the selector OP wants. in the code provided, there IS no `.group` - no element has the class name group. There is an element with the group property/attribute though - `[group] .circular-progress::before` looks like what you may actually be looking for. Is it possible that you are only trying to add this style inline at this point because you tried the first selector as part of your external CSS and it failed to apply the style you wanted? — Chris O'Kelly, Feb 12 '19 at 03:07
@Chris O'Kelly: Looks like that inconsistency has since been corrected. The problem does indeed lie with the fact that they're trying to specify a pseudo-element style in an inline style attribute - that's not going to work. — BoltClock, Feb 12 '19 at 04:34

caiovisk · Answer 1 · 2019-02-12T22:55:08.610

You can't specify inline styles for pseudo-elements. The content is for :before and :after pseudo-elements.

The content property is used with the ::before and ::after pseudo-elements, to insert generated content.

https://www.w3schools.com/cssref/pr_gen_content.asp

So you may end up doing something like this:

<style>.group .circular-progress::before {content: "10%";}</style>
<div class="group">
    <div class="circular-progress"></div>
</div>

UPDATE:

Your last value inside class .group .circular-progress::before selector is overriding the previous classes parameters because it have the same class selector name. To get your loop working, set an loop index or simply use your g.value on the loop and print a 'unique' class selector to you element.

Style will look like this:

<style>.group .circular-progress.prog-ind-10::before {content: "10%";}</style>

And the element:

<div class="circular-progress prog-ind-10" ...></div>

So every style will have a different class selector like prog-ind-10, prog-ind-20 and so on, it will avoid the overriding issue.

Your loop will be similar as below:

<% if @goals.empty? %>
    <%= "You don't have any goals entered yet." %>
<% else %>
    <% @goals.each do |g| %>
        <% puts g.value %>
        <style>.group .circular-progress.prog-ind-<%= g.value %>::before {content: "<%= g.value %>%";}</style>
        <div class="group">
          <div class="circular-text"><%= g.name %></div>
          <div 
             class="circular-progress prog-ind-<%= g.value %>" 
             style="background: linear-gradient(90deg, #e0e0e0 50%, transparent 50%, transparent), linear-gradient(270deg, #ff70a6 50%, #e0e0e0 50%, #e0e0e0);">
           </div>
        </div>
    <% end %>
  <% end %>

It almost works! I am able to dynamically change the content style. However, it spawned a Ruby-related issue with a for loop that is overriding the content each time. I am updating the post now. — astronat, Feb 12 '19 at 18:18
Alright the 40 issue is happening because the `CSS` classes have the same name. Please see my updated answer. — caiovisk, Feb 12 '19 at 22:39

How do I insert quotes inside inline CSS?

1 Answers1