R Shiny中如何移除悬停带外链图片时出现的下划线

现有Shiny应用代码如下，导航栏标题中嵌入了两张带跳转链接的图片，鼠标悬停在图片上时，图片右侧会出现多余的下划线，已知CSS属性text-decoration: none;可移除下划线，需要将该样式整合到Shiny应用中，同时需要可复用的通用解决方案。

shinyUI(fluidPage(
  useShinyjs(),
  # some code
  shinyjs::hidden(div(
    navbarPage(title = div(
      a(href="跳转链接地址1", target = "_blank", img(src="img_1.png", filetype="image/png", height="30px", width="90px", style="position: relative; margin: -15px 5px; display: right-align;")),
      a(href="跳转链接地址2", target = "_blank", img(src="img_2.png", filetype="image/png", height="30px", width="60px", style="position: relative; margin: -15px 15px; display: right-align;")),
      "Indicators"
      ),
      # some code
    )
  ))
))

问题原因：<a>链接标签默认自带的文本下划线会覆盖标签内所有行内内容的占位区域，标签包裹图片时，标签内的空白占位也会被渲染下划线，就会出现图片右侧露出一截下划线的现象。

1. 单元素快速修复 #

如果只需要修复这两个图片链接的问题，直接给包裹图片的<a>标签添加内联样式text-decoration: none;即可，修改后的对应代码片段：

a(href="跳转链接地址", target = "_blank", style = "text-decoration: none;",
  img(src="img_1.png", filetype="image/png", height="30px", width="90px", style="position: relative; margin: -15px 5px; display: right-align;")
)

两个链接标签都加上这个style属性就能解决当前问题。

2. 全局通用解决方案（推荐） #

通过添加全局CSS规则一次性解决同类问题，不需要逐个修改链接标签，还能覆盖悬停、聚焦等所有交互状态，不会出现样式遗漏。
直接在UI的useShinyjs()后方加入tags$style块写入自定义CSS即可：

shinyUI(fluidPage(
  useShinyjs(),
  # 新增全局CSS
  tags$style(HTML("
    /* 所有包含图片的链接全状态下去除下划线 */
    a:has(img), a:has(img):hover, a:has(img):focus {
      text-decoration: none !important;
    }
    /* 兼容不支持:has选择器的旧浏览器，单独给导航栏内链接去除下划线 */
    .navbar a, .navbar a:hover, .navbar a:focus {
      text-decoration: none !important;
    }
  ")),
  # 原有后续代码
  shinyjs::hidden(div(
    navbarPage(title = div(
      # 原有链接代码无需修改
      a(href="跳转链接地址1", target = "_blank", img(src="img_1.png", filetype="image/png", height="30px", width="90px", style="position: relative; margin: -15px 5px; display: right-align;")),
      a(href="跳转链接地址2", target = "_blank", img(src="img_2.png", filetype="image/png", height="30px", width="60px", style="position: relative; margin: -15px 15px; display: right-align;")),
      "Indicators"
      ),
      # some code
    )
  ))
))

• 代码中加!important是为了覆盖Shiny自带Bootstrap框架的默认链接样式优先级，保证自定义样式生效
• 如果不需要全局处理所有带图片的链接，只保留.navbar开头的那组CSS规则即可，不会影响页面其他位置的普通文本链接样式

内容的提问来源于stack exchange，提问作者LJG