You can specify multiple values to the CSS content property by separating each value by space. The same is true when you want to use the attr() function multiple times. For example:
.foo::after {
content: ' (' attr(href) ') - ' attr(title);
}
<a href="https://designcise.com" title="Free Web Resources" class="foo">
Designcise
</a>
<!--
output: 'Designcise (https://designcise.com) - Free Web Resources'
-->
As you can see from the example above, when space is specified as a string (i.e. inside single or double quotes), it is visually displayed as a part of the output. However, when the space is not specified as a literal string, it is interpreted as separation of multiple values (such as literal strings, computed values from attr() function, etc.).
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.