Tips for incorporating data attributes into <figure> elements and retrieving them using CSS

Can we enhance a <figure> element by adding data attributes and then utilizing them in CSS?

For example, I attempted

figure { margin: 0 attr(data-margin %); }

using

<figure data-margin="15">...</figure>

but it didn't yield the desired results.

Is there an alternative method that doesn't involve JavaScript?

UPDATE: I don't believe my inquiry is a duplicate. I am seeking a different approach to achieve this.

I intend to customize certain elements on a page with attributes that end users can access and leverage through CSS coding. If this is not feasible, I may have to advise them to resort to JS scripting, albeit less secure.

(The end users are ML researchers. They are proficient in CSS and JS coding.)

htmlcss

Answer №1

Feel the power within you:

.test {
    display: inline-block;
    background-color: gray;
    width: attr(data-width px);
}

.test:after {
    content: attr(data-name);
}
<div class='test' data-name=" - CONTENT" data-width="200">teste</div>

although it may struggle in Chrome: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

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

Click the icon to introduce a fresh row into the table

I have embedded a table with a "plus" font awesome icon. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorig ...

htmlcsstwitter-bootstrap

Attempting to store the output of a function in a variable

My current script is designed to verify if the value of a selected element matches the span id. While the function itself functions correctly (verifying object.id via alert), I am encountering issues with variable assignment. When attempting to alert the ...

javascripthtml

Are there any ways to bring visual attention to a GoDaddy template's SEND button using HTML or JS when the original code is unavailable?

I'm currently working on a GoDaddy website using a template that doesn't clearly highlight the SEND button in a Contact Us form. In order to comply with WCAG accessibility standards, active elements must have visible focus indicators. However, si ...

javascriptjquerycssinline-styleswcag2.0

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Using PHP to store cookies

<?php $_SESSION['name'] = array($_POST['name']) ; $n = $_SESSION['name'][0]; setcookie('name[0]',$n,time()+(60*30)); ?> <html> <form class="contact100-form validate-form" action="step-3.php" > ...

phphtmlcookies

Adjust background color on click using JavaScript

Could someone provide me with the JavaScript code to change the background color of a page from blue to green when a button is clicked? I have seen this feature on many websites but haven't been able to write the code myself. I am specifically lo ...

javascripthtmlcssreactjs

Guide on aligning a division within another division?

Included below is my HTML code: <div id="background_div"> <img id="background_img" src="images/background.jpg" alt="dont matter"> <i class="material-icons">perm_identity</i> <div id="dropdown"> <ul id=" ...

htmlcss

Adjusting a Form Input Field

There seems to be an issue with the text alignment in my submission form input field, as the text appears a few pixels too low. This is causing certain letters like y, q, and j to bleed below the box in Chrome and only partially show in IE 8. To fix this p ...

htmlcss

Is there a way to create an animation for changing .text in response to an on click event?

I'm currently developing a simple calculator that increases a variable when a button is clicked, displaying the updated value in a div. Each click on the 'amount-upwards' button adds 200 to the displayed number. Below is the jQuery code I a ...

jquerycssanimation

What is the best way to create multiple PDF pages using mpdf1?

Currently using mpdf1 and looking to generate a PDF with a table of 4000 rows. Any suggestions on how to achieve this using mpdf1? Is there a method to speed up the process and avoid waiting for several minutes? ...

phphtmlpdf

Tips for displaying a digital keyboard when a webpage loads on iOS Safari

While developing a website, I noticed that the virtual keyboard fails to appear when an input field gains focus during the page load process. As per Apple's policy restrictions, this functionality is not allowed. However, I am interested in finding a ...

javascripthtmlcssiosiphone

Tips for applying unique CSS classes to individual templates in Joomla

I manage a website at www.kadamjay.kg using an RT template system where each language version has its own unique template. However, when I add a class to a specific element, it only changes on one template and there are no additional templates in the pat ...

cssclasstemplatesjoomla

Disabling a jQuery function on an external page: Step-by-step guide

I have encountered a challenge while trying to load an anchor tag on an external page using a specific method: <a href="page.html#div> This method is meant to link me to another page's particular div. <div name="div"> stuff </> H ...

jqueryhtmlhyperlinkanchorautoscroll

Is it possible for a mobile device to play .ogg videos?

Currently, I am setting up a server to stream videos using HTML. So far, I have tested playing both .mp4 and .ogg video formats on my computer successfully. However, when I attempted to play the same videos on a mobile device, only the .mp4 file showed u ...

htmlnode.jsvideo-streamingogg

Experiencing problems with web page layout when using bootstrap on IE8?

Here is a code snippet that functions correctly in IE9 and later versions, but encounters issues in IE8: <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" id="div1"> <div class="panel panel-default" style="" id="panel1"> ...

javascripthtmlcssinternet-explorer-8twitter-bootstrap-3

Altering the text and functionality of buttons with jQuery

A JavaScript method I have is designed to change based on the state of a button, which is determined by using indexOf("..some text.."). $('#add1').click(function(){ if($(this).text().indexOf("Add Me!")) { $.ajax({ type: & ...

javascriptjqueryhtml

Pure CSS text slideshow

I'm currently working on developing a text content slideshow using only CSS. Here is the HTML/CSS code I have: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow examp ...

htmlcssanimationslideshowcss-animations

Limit not reached by substring function

When the character limit exceeds 20 characters, the substring function extracts the first 20 characters typed in the input. It replaces any additional characters that are entered after reaching the max limit of 20. In my program, however, I am able to con ...

javascripthtmlcharactercounting

Keep JS Accordion open when links are clicked

Utilizing PHP, I am fetching items from a database and creating an HTML table to display each item. Adjacent to the HTML table, there is a side menu with an accordion function implemented in JavaScript. Within each accordion section, there are links for ...

javascripthtml

Tips for overlaying a webpage with several Angular components using an element for disabling user interactions

I currently have an asp.net core Angular SPA that is structured with a header menu and footer components always visible while the middle section serves as the main "page" - comprised of another angular component. What I am looking to achieve is ...

htmlcsstypescriptasp.net-coreangular12