RE: Append red color asterisk to web resource label
Hi Priyank,
You could do it with unsupported way:
The process is below:
select web resouce label element by its data attribute -> create a style node -> fill the node with custom CSS rules -> append the tag to the DOM.
1. Get a data attribute value by inspector:
2. Make the label visible
3. Execute function below at form OnLoad event.
function createStyle() {
var customStyle = '[data-id="WebResource_All_Records-WebResource_All_Records_label"]:after {';
customStyle = 'content: "\\002A"; display: inline-block; width: 20px; height: 20px; color: red; text-align: center }';
var css = document.createElement('style');
css.type = 'text/css';
css.innerHTML = customStyle;
parent.document.head.appendChild(css);
}
Result: a red color asterisk has been appended to the label
How does it work:
::after selector will insert some text after the content of selected element,
so we created an inline-block element which contains asterisk symbol,
in HTML, css code for asterisk is "\002A".
When opening inspector again, we can find an extra element was inserted after label element.
At same time, a style node was appended to head tag:
Regards,
Clofly
