Using h:outputText with first-letter

[lenyas66]

I want to use h:outputText to show some header, but first letter of each word needs to be underlined.

I know that CSS pseudo element first-letter is supposed to accomplish it, but somehow it doesn't work with h:outputText.

Any suggestions?

Code sample is below:

<h:outputText styleClass="headerFont" value="portfolio test" />

...

.headerFont {
    FONT-SIZE: 16pt;
    PADDING-BOTTOM: 0px;
    COLOR: #FFFFFF;
    PADDING-TOP: 20px;
    FONT-FAMILY: Verdana;
    font-weight:bold;
}

.headerFont:first_letter {
    text-decoration:underline;
}

[ufonaut]

It might depend on where the outputText is.

http://http://www.w3schools.com/css/css_pseudo_elements.asp says :

Note: The "first-letter" pseudo-element can only be used with  block-level elements.

[lenyas66]

Rob,

I think, you are right, but I tried it with block-level elements such as div or p and it looks really weird.

I hope, to avoid the need to put the first letter as a separate outputText, but if I have no choice...

The full code is as follows now:

<h:panelGrid id="hdrTab" columns="2" columnClasses="vaMidHaLeft, haRightVaMid">

<f:facet name="header" >

<div class="makeInvisible" id="ruleHeader"/>

</f:facet>

<h:panelGrid columns="2">

<h:outputText styleClass="headerFont" value="portfolio" />

<h:outputText styleClass="headerFont" value="insights" />

</h:panelGrid>

<h:graphicImage id="hdrImg" value="images/PI_logo_new.jpg"/>

</h:panelGrid>

[chuckie474]

Can you use layout="block"?

<h:panelGroup layout="block" styleClass="headerFont"><h:outputText  value="portfolio" /></h:panelGroup>

<h:panelGroup layout="block" styleClass="headerFont"><h:outputText value="insights" /></h:panelGroup