from my understanding, accomplishing this task using CSS is likely impossible.
if altering the source code directly isn't an option, perhaps injecting some javascript code could work
here's a sample code illustrating how to display each image title attribute below the respective image:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>set title attribute as caption</title>
</head>
<body>
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 1">
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 2">
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 3">
<img src="https://picsum.photos/200/300" class= "caption" title="sample title 4">
</body>
<script>
// select all images with the caption class
const images = document.getElementsByClassName('caption')
Object.keys(images).forEach((key) => {
// create paragraph HTML tag or any other desired element
let caption = document.createElement('p');
// store the content of the title attribute in the created element
caption.textContent = images[key]['title'];
// place the caption after each image
images[key].after(caption);
})
</script>
</html>
Give it a try on JSFiddle
Note: This approach may impact SEO as search engine crawlers might not be able to recognize the captions you've added.