How to Use the attr() Function Multiple Times With CSS "content" Property?

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.).