I am trying to get cross-references working for images linked via xlink. The ":after" attribute is working, because I've been able to make it insert static text, but I can't get it to insert the referenced page number.

Here's the relevant code:

XML
========================================
<abstractText>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<pictureLink xlink:type="simple" xlink:href="#apple" xlink:show="new">This is an apple</pictureLink>
</abstractText>

<picture id="apple" link="apple.jpg" />
=========================================

CSS
=========================================
picture {content: attr("link", url);}

pictureLink { display: inline; margin-top: 0px; margin-bottom: 0px; text-decoration: underline; color: blue;

margin-right: 2pt;}

pictureLink:after {
content: target-counter(attr(href), page);
}
=========================================

I've also tried, to no avail:
pictureLink:after {
content: target-counter(attr(xlink:href), page);


Any ideas?

Just to make sure my goal is understood: I am trying to get a reference such as (See page 5) to show up after a link that points to a <picture> on page 5.

Use "attr(xlink|href)", ie. replace the colon with the pipe symbol. This is the syntax used for namespace prefixes in CSS.

Unfortunately even the pipe didn't work.

Here's my current code:

pictureLink:after {
content: " (See page " target-counter(attr(xlink|href), page) ")"
}

On output, I get: (See page )

As you can see, it is missing the page number.

Any ideas? Is there anything else I need to do to "initialize" the page numbering?

The other thing I'm wondering is, I'm using content replacement to display "apple.jpeg" in element <picture>. I read something somewhere in the forums about cross-references to empty elements not working. I wonder if the cross-reference logic is performed before the content replacement, and therefore <picture> is empty, leading to a failed cross-reference.

Oh, I almost forgot, you will also need to declare the namespace at the top of the style sheet (after any imports) like this:

@namespace xlink url("http://www.w3.org/1999/xlink");

That works wonderfully!

However, I do have one last issue I need to tweak. This will create an underlined link out of the whole picture element.

This is an apple (See page 2)

I am trying to be able to get the following:
This is an apple (See page 2)

I don't want the cross-reference to be a link.

Perhaps the ::after pseudoelement just doesn't support this?

I even tried adding a "text-decoration: none;" style to :after, but with no luck.

That is a bit tricky, as the ::after pseudo-element gets added inside the pictureLink element, at the end. Even though it isn't underlined, its parent is, which includes all the text. I think the only way around this would be to have another element inside the pictureLink element that you can apply the underline to, but that might not fit in with your current markup.