I received the request to replicate the Word function 'Line Numbers' for our generated documents.
That can be done with the help of sidenotes, at least for elements like paragraphs, table rows and images.
But I encountered the following problem: The selector "img:before" breaks the "max-width" property of the image!
Example:
The setting "max-width: 5cm" for img is ignored in this case.
That can be done with the help of sidenotes, at least for elements like paragraphs, table rows and images.
But I encountered the following problem: The selector "img:before" breaks the "max-width" property of the image!
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image with Caption</title>
<style>
img:before {
content: "This is a 10cm Circle";
display: block;
}
img { display:block; max-width:5cm; }
</style>
</head>
<body>
<img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTBjbSIgaGVpZ2h0PSIxMGNtIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIgZmlsbD0iYmx1ZSIgLz4KPC9zdmc+Cg==" alt="10cm Circle"/>
</body>
</html>
The setting "max-width: 5cm" for img is ignored in this case.
- - -
Johann