text-decoration: 内有变形元素的下划线

Question

我的链接有时包含字符“•”。使用 webfont 时，圆点显得很小，所以我应用 transform: scale(1.25); 这只有在使用 display: inline-block; 将圆点包裹在新框中时才有可能。但是，点下面的下划线消失了。

这是基本代码

.dot{
  display: inline-block;
  transform: scale(1.25);
  margin: 0 0.25em;
}

a:link{
  text-decoration: underline;
}

<a href="#">
  Text 
  <span class="dot">•</span> 
  Text
</a>

我不能使用边框，因为链接有时跨越两行。

知道如何实现吗？

Answer 1

请尝试以下css。

.dot{
  display: inline-block;
  font-size:44px;
  line-height:22px;
  vertical-align:middle;
}

Answer 2

您可以将其替换为如下渐变：

.dot{
  display: inline-block;
  transform:scale(1.25);
  margin: 0 0.25em;
}

a{
  line-height:1.2em;
  background:
    repeating-linear-gradient(to bottom,
    transparent 0,transparent calc(1em - 1px),
    currentColor calc(1em - 1px),currentColor 1em) ;
  text-decoration:none;
}

<a href="#">
  Text 
  <span class="dot">•</span> 
  Text
</a>
<div style="width:50px">
<a href="#" >
  Text 
  <span class="dot">•</span> 
  Text
</a>
</div>

<div style="width:50px">
<a href="#" style="font-size:20px">
  Text 
  <span class="dot">•</span> 
  Text
</a>
</div>

text-decoration: 内有变形元素的下划线

text-decoration: underline with transformed element inside

css

underline

text-decorations