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

Find out how you can use attr() multiple times with CSS pseudo-elements

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


Hope you found this post useful. It was published . Please show your love and support by sharing this post.