Tips on incorporating the $ symbol into a pseudo element

Can I add a price using a pseudo element?

h3:after{
    content: " (+ $75)";
}
<h3>price</h3>

The CSS minifier is preventing the display of "$75". How can I work around this issue?

Answer №1

If you utilize the entity number, proceed with caution as this may result in poorly designed roads that lead to bad coding practices.

h3:after{
    content: " (+ \0024 75)";
}
<h3>price</h3>

Answer №2

Implementing it as a data-attribute:

h3:after{
    content: " (+ " attr(data-symbol)"75)";
}
<h3 data-symbol="$">price</h3>

Alternatively, utilizing the entire text as a data-attribute:

h3:after{
    content: attr(data-content);
}
<h3 data-content=" (+ $75)">price</h3>

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

Looking to trigger a PHP page by clicking on a div?

Is there a way to trigger a PHP page call when a user clicks on a <DIV> with AJAX? Additionally, can the text of the DIV be changed to display "LOADING....." simultaneously? I lack knowledge about AJAX. Could you please provide me with more details ...

CSS Flexbox with 3 columns and a grid layout of 4 by 4, with one large item included

I am currently exploring how to implement this layout using Flexbox. So far, I have only managed to come up with the following code snippet: https://i.sstatic.net/mKVlu.jpg Is there a way to achieve this purely through CSS without altering the HTML struc ...

Creating a custom design for a button using an external CSS file

I have an HTML code linked to a CSS file where I'd like to style buttons. The button styles are defined in the CSS file. Everything else is working fine, but when I attempt to apply the styled button, it reverts back to a standard HTML button unless ...

What is the best way to choose the nearest element using the initial part of a class name?

I am working on a section of a table and need to hide a specific part when an icon is clicked. Below is the code snippet: <tr class="getmoreinfo_19"> <td>&nbsp;</td> <td colspan="3"> <div c ...

Tips for structuring a news thread with a staggered approach

On my Drupal 8 website, I have set up a newsfeed. How can I display the news items in staggered rows? I would like the first item to align on the left and the second item to be on the right, repeating this pattern for all subsequent items. Currently, I am ...

What is the best way to iterate through JSON objects stored in a single location?

Currently, I am dealing with a single JSON object structured as follows: Object --> text --> body --> div Array[20] --> 0 Object --> text --> body --> div Array[20] --> 1 Object --> text --> body --> div Array[20] --> . ...

Creating an email-friendly button in Outlook without using images by styling a hyperlink with padding

Presenting a basic HTML code snippet - https://jsfiddle.net/mark69_fnd/6g0L0jwc/ <body style="background-color: white; font: normal 14px Verdana"> Hello <p></p> <a style=" font: bold 11px; text-decoration: none; background-color ...

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

Achieving Right Alignment of SVG Next to an <h4> in Bootstrap 5

I'm encountering an issue where I am attempting to align an SVG icon to the right of an H4 element and center it vertically using Bootstrap 5, but it's not working as intended. <div class="container-fluid"> <div class="r ...

Adjust the text size of Twitter Bootstrap on mobile screens

I recently started using Twitter Bootstrap. I am currently hiding certain <tr> elements on phone screens by utilizing the class="hidden-phone". However, I am now looking to resize the displayed text to better fit the screen. Is there a way to adjus ...

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

Adjusting background position using incremental changes through JavaScript

Although I have a strong background in PHP coding, using javascript is a new venture for me so I hope this question doesn't sound naive. My objective is to create a button that, when clicked, shifts the background-position of a specified DIV object b ...

modify header when button is clicked

I am trying to create a JavaScript function that will update the name of an HTML table header when a button is clicked. However, I am having trouble accessing the text content within the th element. document.getElementById("id").text and document.getEl ...

Clickability issue with searchbar results caused by onBlur event

My searchbar functionality includes showing results in a dropdown list when the user searches. However, I am facing an issue with the onBlur event that changes the display of the list to none when the user clicks away from the search box. The problem aris ...

Looking to set up a layout with two columns in the first row and one column in the second row, then combine the two columns using HTML and CSS

My goal is to set up a layout with two columns in the first row, one at 70% width and the other at 30%, and a single column in the second row. However, when I add text and images, the content doesn't position as expected: body { background-image: ...

Is there a way to control a single Angular application using multiple JavaScript scripts?

Summary: I am looking for a way to allow two script files to handle different tasks within the same angular app. One needs to initialize the app, while the other needs to assign a templateCache object to a section of JSON stored in localStorage. Backgrou ...

Personalize the hover effect and underline style of links in material-ui

I am currently delving into the world of material-ui custom styles and came across this helpful resource. However, I find myself a bit lost in how to properly override the classes using withStyles. <Breadcrumbs aria-label="breadcrumb" separator=" ...

Is it possible to utilize an if statement to select a specific Bootstrap modal?

How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...

The website is experiencing some trailing spaces and overflow issues

Currently, I am in the process of designing a portfolio page that utilizes a mix of flex and grid elements. However, during my development phase, I noticed a small gap of around 8 pixels on the left side of the page causing unevenness in the header section ...