如何用CSS实现悬停任意文本时为第一个文本添加下划线？

我有一个包含两段文本的链接，点击任意一段文本都能触发跳转。现在需要实现悬停任意一段文本时，class为title的第一段文本显示下划线，但目前只有悬停第一段文本时该效果才生效。现有代码如下：

现有CSS代码 #

.title:hover{
    text-decoration: underline
}

现有HTML代码 #

<p:link href:...>
   <h:outputText styleClass="title" value="Title"/>
   <h:outputText styleClass="subtitle" value="Subtitle"/>
</p:link>

解决方案 #

不需要单独为.subtitle编写CSS，而是通过父元素的hover状态来控制.title的样式，这样无论悬停在链接内的哪个文本元素上，都能触发标题的下划线效果：

p\:link:hover .title {
    text-decoration: underline;
}

说明

<p:link>是两个文本元素的父容器，当鼠标悬停在链接区域内的任意位置（包括.subtitle）时，父元素的:hover状态会被激活，此时选中内部的.title元素添加下划线样式，完美满足需求。

如果觉得命名空间选择器p\:link不够直观，也可以给<p:link>添加自定义类名，比如link-wrapper，代码如下：

修改后的CSS

.link-wrapper:hover .title {
    text-decoration: underline;
}

修改后的HTML

<p:link href:... styleClass="link-wrapper">
   <h:outputText styleClass="title" value="Title"/>
   <h:outputText styleClass="subtitle" value="Subtitle"/>
</p:link>

内容的提问来源于stack exchange，提问作者Patricia Garcia Ferrandez