Showing a generated content before element on a progress bar using the ::before pseudo-class

Question

Showing a generated content before element on a progress bar using the ::before pseudo-class

I'm currently attempting to showcase a ::before pseudo-element on a <progress> bar in the form of a label featuring the value attribute. My current approach successfully displays the ::before element in Brave (v1.61.109), but unfortunately, it does not show up in Safari(17.1.2) and Firefox (121.0). Despite this, I am facing a challenge related to the height of the pseudo-element. It seems that the pseudo-element itself does not directly impact the layout flow. Nevertheless, I am eager to discover an effective workaround.

Moreover, besides just displaying the element, I aim for it to be factored into the height calculation of the parent box, specifically within the context of .card. I am seeking a solution that adapts dynamically.

https://i.sstatic.net/7vjSf.jpg

Below is the provided HTML code:

<div class="card">
    <p>Item 1</p>
    <p>Item 2</p>
    <progress max="100" value="100"></progress>
</div>

Additionally, here is the corresponding CSS:

.card {
    display: flex;
    flex-direction: column;
    width: 300px;
    background: beige;
}

progress[value] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
}

progress {
    position: relative;
}

progress:before {
    content: attr(value) '% some text here';
    font-size: 2rem;
    color: black;
    text-align: center;
    height: 2rem;
    line-height: normal;
}

progress[value]::-webkit-progress-value {
    background-color: green;
    border-radius: .2rem;
}

progress[value]::-moz-progress-bar {
    background-color: green;
    border-radius: .2rem;
}

If anyone has suggestions on how to address this visualization issue, please share your ideas!

html css firefox webkit

Answer 1

Answer №1

While considering your query, I stumbled upon a potential solution involving the use of JavaScript to update the progress percentage instead of utilizing CSS's attr() function.

There are two key reasons for opting for JavaScript in this scenario:

It offers simplicity in implementation.
By using JavaScript, we can avoid certain issues associated with the :before pseudo-element, particularly its compatibility concerns with Safari and size calculation within the parent element.

In this approach, employing a

<div id="progress-label"></div>

allows us to confine the progress percentage display within the parent (.card) element, leveraging its block-level nature and static positioning. The JavaScript code merely updates the text content within this div element dynamically during execution.

You may experiment with this template and customize it to suit your requirements. Feel free to explore a live demonstration on CodePen via the following link: https://codepen.io/Jun-Wen-Soh/pen/ZEPQgGR

HTML

<div class="card">
  <p>Item 1</p>
  <p>Item 2</p>
  <div class="wrapper">
    <div id="progress-label"></div>
    <label for="progress-bar">Progress:</label>
    <progress id="progress-bar" max="100" value="100"></progress>
  </div>
</div>

CSS

.card {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: beige;
  padding: 15px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
}

progress {
  position: relative;
}

#progress-label {
  font-size: 2rem;
  color: black;
  text-align: left;
  height: 2rem;
  line-height: normal;
}

progress[value]::-webkit-progress-value {
  background-color: green;
  border-radius: .2rem;
}

progress[value]::-moz-progress-bar {
  background-color: green;
  border-radius: .2rem;
}

JS

const progressBar = document.getElementById('progress-bar');
const progressLabel = document.getElementById('progress-label');

progressLabel.textContent = progressBar.value + '% some text here';

Answer 2

While considering your query, I stumbled upon a potential solution involving the use of JavaScript to update the progress percentage instead of utilizing CSS's attr() function.

There are two key reasons for opting for JavaScript in this scenario:

It offers simplicity in implementation.
By using JavaScript, we can avoid certain issues associated with the :before pseudo-element, particularly its compatibility concerns with Safari and size calculation within the parent element.

In this approach, employing a

<div id="progress-label"></div>

allows us to confine the progress percentage display within the parent (.card) element, leveraging its block-level nature and static positioning. The JavaScript code merely updates the text content within this div element dynamically during execution.

You may experiment with this template and customize it to suit your requirements. Feel free to explore a live demonstration on CodePen via the following link: https://codepen.io/Jun-Wen-Soh/pen/ZEPQgGR

HTML

<div class="card">
  <p>Item 1</p>
  <p>Item 2</p>
  <div class="wrapper">
    <div id="progress-label"></div>
    <label for="progress-bar">Progress:</label>
    <progress id="progress-bar" max="100" value="100"></progress>
  </div>
</div>

CSS

.card {
  display: flex;
  flex-direction: column;
  width: 300px;
  background: beige;
  padding: 15px;
}

.wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

progress[value] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
}

progress {
  position: relative;
}

#progress-label {
  font-size: 2rem;
  color: black;
  text-align: left;
  height: 2rem;
  line-height: normal;
}

progress[value]::-webkit-progress-value {
  background-color: green;
  border-radius: .2rem;
}

progress[value]::-moz-progress-bar {
  background-color: green;
  border-radius: .2rem;
}

JS

const progressBar = document.getElementById('progress-bar');
const progressLabel = document.getElementById('progress-label');

progressLabel.textContent = progressBar.value + '% some text here';

Answer 3

Answer №2

Concerns Surrounding Pseudo-elements in CSS

The before pseudo-element is positioned prior to the content inside the tag, rather than preceding the opening of the tag itself. Consequently, the flex rule fails to apply correctly since it targets the direct children of .car, while the :befoer pseudo-element is the initial child of <progress>.
Furthermore, as indicated in the documentation here, using a pseudo-element on an HTML element that is not part of the document tree is not supported.
In addition, content generated via CSS remains inaccessible to screen readers, thus underscoring the importance of ensuring that CSS-generated content does not hinder page comprehension.

To address these issues, adjustments to the HTML code are necessary:

<div class="card">
    <p>Item 1</p>
    <p>Item 2</p>
    <label for="progress">% some text here</label>
    <progress id="progress" max="100" value="100">toto</progress>
</div>

An inclusion of JavaScript similar to the snippet below may be beneficial:

const progressElement = document.getElementById('progress');
const progressLabelElement = document.querySelector('[for=progress]');
const initialTextContent = progressLabelElement.textContent;

function updateValue() {
    progressLabelElement.textContent = progressElement.value + initialTextContent;
}
// this is not needed if the value does not change
progressElement.addEventListener('input', updateValue);

updateValue()

Answer 4

Concerns Surrounding Pseudo-elements in CSS

The before pseudo-element is positioned prior to the content inside the tag, rather than preceding the opening of the tag itself. Consequently, the flex rule fails to apply correctly since it targets the direct children of .car, while the :befoer pseudo-element is the initial child of <progress>.
Furthermore, as indicated in the documentation here, using a pseudo-element on an HTML element that is not part of the document tree is not supported.
In addition, content generated via CSS remains inaccessible to screen readers, thus underscoring the importance of ensuring that CSS-generated content does not hinder page comprehension.

To address these issues, adjustments to the HTML code are necessary:

<div class="card">
    <p>Item 1</p>
    <p>Item 2</p>
    <label for="progress">% some text here</label>
    <progress id="progress" max="100" value="100">toto</progress>
</div>

An inclusion of JavaScript similar to the snippet below may be beneficial:

const progressElement = document.getElementById('progress');
const progressLabelElement = document.querySelector('[for=progress]');
const initialTextContent = progressLabelElement.textContent;

function updateValue() {
    progressLabelElement.textContent = progressElement.value + initialTextContent;
}
// this is not needed if the value does not change
progressElement.addEventListener('input', updateValue);

updateValue()

Showing a generated content before element on a progress bar using the ::before pseudo-class

Answer №1

Answer №2

Concerns Surrounding Pseudo-elements in CSS

Similar questions

Navigate to the following section on an HTML page by clicking a button using jQuery

The behavior of CSS position: sticky varies depending on whether the user is scrolling up or scrolling down

Using a single name in the form, input multiple parameters and retrieve a comprehensive list of all of them

HyperText Markup Language, Cascading Style Sheets, and JavaScript

The CSS border on a div has inexplicably ceased functioning in Chrome, yet continues to work perfectly in

Tips for optimizing Slider Code to showcase an expanded selection of slides

What is the best way to click on a specific webElement in a group of webElements using Python Selenium?

Angular components are not receiving the Tailwind CSS attributes applied to :root classes

What is the best way to include a permanent placeholder within an input field?

Eliminate the bottom padding on the body in your HTML and CSS code

Animating divs one by one using CSS3 with delays

What is the best way to incorporate the .top offset into a div's height calculation?

What is the best way to include content within the li element?

Working with HTML5 canvas to draw multiple images

Having trouble displaying data from a MongoDB database using ng-repeat in AngularJS

Concealing a message within a section that has been minimized to a width of 0

Using Tailwind CSS's width property w-11/12 actually returns a full 100% width instead of the expected 91.66

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

Alternative background for browsers that do not have support for border-image styling

Achieving the perfect overlay and centered image effect using CSS