What is the best way to incorporate quotes within inline CSS code?

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.

Answer №1

CSS inline styles cannot be applied to pseudo-elements such as :before and :after. The content property is specifically used for these pseudo-elements.

The use of the content property is essential when working with the ::before and ::after pseudo-elements, as it allows you to insert generated content.

Check out this link for further information on CSS Generated Content Module Level 3

In order to achieve the desired effect, consider implementing the following structure:

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

UPDATE:

In your code, the value inside the class selector

.group .circular-progress::before
may be overwritten because it shares the same class name. To address this issue, introduce a loop index or utilize g.value within the loop to differentiate the class selectors.

The revised styling should resemble:

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

Followed by the element:

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

By incorporating unique class selectors like prog-ind-10, prog-ind-20, and so forth, you can prevent any potential style conflicts.

Your loop implementation might appear similar to the example below:

<% if @goals.empty? %>
    <%= "You haven't entered any goals 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 %>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jinja2.exceptions.TemplateSyntaxError: instead of 'static', a ',' was expected

My current project involves using Flask for Python, and I encountered an error when running the project from PyCharm. The error message points to line 192 in my home.html file: jinja2.exceptions.TemplateSyntaxError: expected token ',', got &ap ...

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

Hey there, currently creating my website and need some assistance. I'm looking to display the date and time in different sections of the page. Having some trouble with getting Indian time to work properly using PHP. If you could help me out with Ja ...

When incorporating script tags in React, an "Unexpected token" error may arise

I am in the process of converting my website to a React site, but I am encountering an issue with the script tags not working. It keeps showing an unexpected token error. Here is the code snippet: <div className="people"> How many people are you ...

Restricting Checkbox Choices with JavaScript by Leveraging the forEach Function

I am developing a checklist application that limits the user to selecting a maximum of three checkboxes. I have implemented a function to prevent users from checking more than three boxes, but it is not working as expected. The function detects when an ite ...

What is the best way to center all items in a vertical list of text?

Having trouble aligning elements in my Angular app - specifically date, file total, and file size. When one number has more digits than the others, it throws off the alignment. I've attempted adjusting padding margins and using display properties lik ...

Can anyone shed some light on why the CSS code is not functioning properly within my HTML file?

My CSS doesn't seem to be working in my HTML. I have linked it correctly, but it's not displaying properly - even showing empty in the CSS tab of Chrome Inspector. The links are there, so I'm not sure why it's not functioning correctly. ...

Tips for overlaying an image on a div regardless of its height

(!) Although this question may seem repetitive, I have not been able to find a suitable solution in any of the previous 10 topics. I apologize for the inconvenience and am actively seeking a resolution to this unique situation; Allow me to outline the iss ...

Grid system not being followed by table in Bootstrap layout

I'm struggling to figure out why the table I have doesn't follow Bootstrap's grid system. It took me a good 2 hours to pinpoint and fix the issue. Any help would be greatly appreciated. I could share the code, but it might be easier for you ...

Element in the Middle

I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...

Using ajax to submit a form in CodeIgniter and displaying the returned data in a table view

When I submit a form on the view page, I want the form data to be saved in a database table and displayed without refreshing the page. Below is my view code: <div class="col-md-12"> <div class="row"> <div> <table class="table table-s ...

Uploading multiple files with unique IDs into a table

Currently, I am attempting to modify the code found at: This code functions perfectly with a single file input (and has been utilized in various projects without any issues). My specific requirement is to generate a table with a file input within each ro ...

What could be causing the DIV elements to not align side by side?

<div id="dvFirst" class="mainSecond" style="background: #6FA5FD;"> <div id="leftdiv3" class="leftdiv">Client: </div> <div id="rightdiv3" class="rightdiv"><asp:DropDownList ID="ddlCliNewMsg" AutoPostBack="t ...

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

Angular error: Unable to access the 'toLowerCase' property of an undefined value

I've been working on creating my own custom filter pipe by following the instructions in this video tutorial, but I encountered an error message stating, "Angular, TypeError: Cannot read property 'toLowerCase' of undefined". I have already i ...

What could be preventing my image from displaying in the header section?

Having trouble displaying the image I added in the header section as a logo. The code works for my online course instructor, but no luck for me. I've tried different images and links to no avail. If you would like to take a look at the codes I used, ...

"Unable to Access Account: PHP Login Script Failing to Log Users In

I've encountered a login issue with my website script that I can't seem to figure out. The script is designed to log users in after they input their username and password, but for some reason, even with the correct credentials, authentication fai ...

Automatically advance to the next input field and go back when the backspace key is pressed after reaching the maximum length

Creating a credit card input field that switches cursor after reaching maximum number length and focuses on previous field when deleting with backspace. (function ($) { $(".nmipay-input-field").keyup(function () { if (this.value.l ...

Ways to adjust the border color when error helper text is displayed on a TextField

I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password." It should look like this: https://i.sstatic.net/Nu0ua.png ...

The expression '<xsl:value-of select="document(content)//title"/>' results in a null node response

Can someone assist me in retrieving the title of a basic HTML document in order to create a sitemap? I have been receiving an empty value every time I try. Upon inspecting the issue, it appears that the document(content) is returning document nodes. It s ...

Mysterious issue causing PHP $_POST to return null

Having a bit of trouble with my PHP $_POST that keeps returning a null or empty value. Although I can't seem to spot any mistakes in my code (I know they are there somewhere), I'm on a time crunch and can't take a break. So, I was hoping som ...