Can someone help me with my syntax. I am creating a visualforce page that renders as a pdf. The text should be red (#c73c3c) and the underline should be black. So far this gives me red text with red underline.

<div style="padding-left:5px; color:#c73c3c; text-decoration: underline; text-decoration-color:black;">


As near as I can tell, you're not doing anything wrong, it's simply not supported. Flying Saucer, the underlying technology, only has spotty support for CSS3.

As an alternative, if you must have it look just that way, you can:

<div style="padding-left:5px; color:#c73c3c;">
    <span style="border-bottom: 1px solid black">Insert text here</span>

Which should give you a pretty decent approximation of a black underline. Feel free to adjust the style as you like.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.