link

PrintCSS

The target-text() function

Next to the target-counter() function and named strings is the function target-text() described in the CSS Generated Content Module Level 3.

This function allows you to get the text value of an element, such as the title of the next chapter in your book.

All you need to do is give your target element an id and create a link to that element somewhere in your document. Let us say we have a simple header & paragraph structure in our HTML, and all headers get a unique id.

<h1 id="chapter1">Semper purus dolor</h1>
<p>Semper purus dolor, in interdum imperdiet! Egestas eleifend conubia platea pellentesque nostra vitae ut nisi vestibulum pulvinar. Tempus elementum dapibus natoque primis lectus hendrerit ad phasellus potenti. Elementum dui fames laoreet proin neque platea taciti. Tortor, at aliquam mollis. Vivamus vehicula habitasse tincidunt aliquet himenaeos maecenas parturient fusce dictum. Tempor taciti auctor tempus taciti neque. Hac primis ante, viverra nam in! Magna gravida accumsan dis.</p>
<h1>Platea curae</h1>
<p>Platea curae; ultrices donec arcu sociis phasellus justo turpis ante interdum velit semper? Etiam natoque velit sem per?</p>
<h1 id="chapter3">Commodo</h1>
<p>Commodo nibh congue commodo praesent torquent morbi sociis. Laoreet ad class dolor mus pretium at odio vulputate euismod! Massa, quis ornare sit consequat elit fames suscipit diam felis vulputate tristique aliquet? Aenean vivamus duis elit ipsum nullam diam velit quisque faucibus nullam! Facilisis ultricies cras molestie quam pharetra nullam tincidunt ipsum. Tempus commodo congue inceptos varius ligula? Facilisis vestibulum pulvinar taciti ad cum tincidunt.</p>

If we want to refer to another chapter now, we can add a standard HTML link to this element. The magic will happen in the CSS.

<h1 id="chapter1">Semper purus dolor</h1>
<p>Get more details <a href="#chapter3">later</a>.</p>
<p>Semper purus dolor, in interdum imperdiet! Egestas eleifend conubia platea pellentesque nostra vitae ut nisi vestibulum pulvinar. Tempus elementum dapibus natoque primis lectus hendrerit ad phasellus potenti. Elementum dui fames laoreet proin neque platea taciti. Tortor, at aliquam mollis. Vivamus vehicula habitasse tincidunt aliquet himenaeos maecenas parturient fusce dictum. Tempor taciti auctor tempus taciti neque. Hac primis ante, viverra nam in! Magna gravida accumsan dis.</p>
<h1>Platea curae</h1>
<p>Platea curae; ultrices donec arcu sociis phasellus justo turpis ante interdum velit semper? Etiam natoque velit sem per?</p>
<h1 id="chapter3">Commodo</h1>
<p>Get more details <a href="#chapter1">here</a>.</p>
<p>Commodo nibh congue commodo praesent torquent morbi sociis. Laoreet ad class dolor mus pretium at odio vulputate euismod! Massa, quis ornare sit consequat elit fames suscipit diam felis vulputate tristique aliquet? Aenean vivamus duis elit ipsum nullam diam velit quisque faucibus nullam! Facilisis ultricies cras molestie quam pharetra nullam tincidunt ipsum. Tempus commodo congue inceptos varius ligula? Facilisis vestibulum pulvinar taciti ad cum tincidunt.</p>

We now use the after pseudo-element to add additional information to our link in our CSS. In the target-text() function, we define that we want the text from the linked element.

a::after {
    content: ", in the chapter with the title: " target-text(attr(href url));
}

And that's it! Now your links are extended by the title of the chapter you are linking to!

Result of the target-text function
Result of the target-text function

At the time of writing this article, the target-text() function works with the renderers AH Formatter 7, Paged.js, PDFreactor, and WeasyPrint.

#Get the complete example

View on GitHub

Get Result PDF

View on the PrintCSS Playground