如何在内联 CSS 中插入引号？ [复制]

Question

如何将下面的 CSS 插入 HTML？

这是我要转换为 HTML 的 CSS：

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

这是我尝试做的：

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

让我失望的是 ::before 元素，或者单引号不起作用的事实。

更新：

它现在可以与以下代码一起使用，但遇到了一个新的 Ruby 相关问题。

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

在我放置 g.value 的那一行，它存储了正确的输入。例如 - 如果值是 [50, 10, 100, 40]，它正在正确打印它们。但是，每次我向@goals 数组添加一个新元素时，它都会覆盖样式内容属性，因此它在网页上四次都显示为 40。例如，如果我添加 30，它会显示 30 全部五次，等等。

Answer 1

您不能为伪元素指定内联样式。 content 用于 :before 和 :after 伪元素。

content 属性与 ::before 和 ::after 一起使用 伪元素，插入生成的内容。

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

所以你最终可能会做这样的事情：

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

更新：

.group .circular-progress::before 类选择器中的最后一个值将覆盖之前的类参数，因为它具有相同的类选择器名称。要让您的循环正常工作，请设置一个循环索引或简单地在循环上使用您的 g.value 并为您的元素打印一个“唯一”类选择器。

样式将如下所示：

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

还有元素：

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

因此，每种样式都会有不同的类选择器，例如 prog-ind-10、prog-ind-20 等，这样可以避免重载问题。

您的循环将如下所示：

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