I am searching for the most efficient and manageable approach to accomplish this task:
These are text slugs that will be attached to various images across the site. Although the messages remain consistent, the images differ and are sourced from a CMS.
I am familiar with one method involving relative positioning of the image and an absolutely positioned child div containing the desired text.
However, given that this technique involves adding HTML code to each image, I am exploring alternative options such as utilizing a CSS class with the :before pseudo-element. Unfortunately, applying the class to a wrapping link does not produce the desired outcome:
<a href="#" class="tabw"><img src="imagepath" alt=""></a>
.tabw img:before {
content: 'there's a better way';
color: red;
font-size: 18px;
}
Is it feasible to achieve this using only CSS? By having the CMS apply the class attribute when necessary, the process would become more streamlined.