【问题标题】:text-decoration: underline with transformed element insidetext-decoration:内有转换元素的下划线
【发布时间】:2019-03-19 16:04:33
【问题描述】:

我的链接有时包含字符“•”。使用 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>

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

有什么想法可以实现吗?

【问题讨论】:

  • 您可以增加 webfont 的字体大小。
  • @stalinrajindian 增加字体大小也会增加下划线
  • 只增加点类的字体。
  • 或者使用更大的点怎么样。 ● 而不是 •。
  • @stalinrajindian 但随后下划线的粗细也会发生变化

标签: css underline text-decorations


【解决方案1】:

您可以将其替换为如下所示的渐变:

.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>

【讨论】:

  • 好主意,没想到。问题是,在以下几行中,该行可能比文本长
  • @obs 这是因为我把它做成了内联块..检查没有内联块的更新
  • 如果您不使用 currentcolor 而是使用“red”,那么它在 Edge 中不起作用,这很奇怪。在 Edge 中,顶部还有一条细线。
【解决方案2】:

请尝试下面的 css。

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

【讨论】:

  • 下划线在哪里?
  • @MrLister inline-block 元素不继承 text-decoration ...尝试他的代码,您将看不到点下方的任何下划线。主要问题是保持点下方的下划线
  • @MrLister 如果我们删除 inline-block,字体大小会使点的下划线大于文本,这是不好的
  • @MrLister 考虑到规范,下划线不会传播Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables. They are also not propagated to inline children of inline boxes, although the decoration is applied to such boxes. w3.org/TR/css-text-decor-3/#line-decoration
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-02
相关资源
最近更新 更多