I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type attribute right below the button element, snug against the border.
The challenge I'm facing is figuring out how to use CSS to position the text against the border without pushing down neighboring elements or causing any layout issues.
<button example-type="hello" example-thing="world" example-name="alice">
Button
</button><br>
<a href="www.google.com"class="centered" example-type="link">search</a>
<br>
<a href="testing.com"class="centered">test</a>
var el = document.querySelectorAll('[example-type]')
for (var i = 0; i < el.length; i++) {
el[i].setAttribute("style","border:1px; border-style:solid; border-color:#FF0000;")
var exampleTypeValue = el[i].getAttribute("example-type")
//add value right below the border of the element
}
I have successfully added the red border around the elements and retrieved the values, but struggling with formatting them to look like this:
Take note of the red box with white text positioned just below the border