Content replacement is directly available in CSS by using the content
property.
This seems to be most commonly used to generate ::before
and ::after
pseudo-elements, but can also be used to replace the content of existing HTML elements.
For the original example
<h1>My Website Title Here</h1>
this is the CSS that will replace the text with the logo:
h1 {
content: url(mywebsitelogo.png);
width: 100%;
}
While in pseudo-elements, any image content cannot be resized (except by using it as a background image), this is not the case for replaced content.
By default, the image will appear at its actual size, expanding the container if necessary, exactly as if it contained an actual <img>
element.
In this example, width: 100%
is used to fit the logo image to the full width. If the image should be shrink to fit, if needed, but never expanded if the container is larger than the image, then max-width: 100%
can be used instead.
According to MDN, the only regular browser which does not support CSS content replacement is Internet Explorer.
@media (min-width: 320px) and (max-width: 767px) { &:after { content: unset; } }
html<td data-text="your text"></td>