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

如何在内联CSS中插入引号？

1 个答案: