2020

Question

有没有办法控制文本修饰中下划线的位置：下划线？

<a href="#">Example link</a>

上面的示例默认有下划线...有没有办法轻推下划线几个像素，以便文本和下划线之间有更多的空间？

Answer 1

唯一的方法是使用边框而不是下划线。众所周知，强调是不灵活的。

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Here's a demo.如果空间不够，你可以轻松添加更多 - 如果太多，那就不太方便了。

Answer 2

你可以像这样在之前和之后使用伪。它运作良好，可完全自定义。

<强> CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

<强> HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>

这是一个更高级的演示，附带截图我制作了动画下划线 悬停，更改颜色等......

http://codepen.io/bootstrapped/details/yJqbPa/

Answer 3

CSS 3中提出了text-underline-position属性，但它似乎尚未在任何浏览器中实现。

因此，您需要使用抑制下划线和添加底部边框的解决方法，如其他答案所示。

请注意，下划线不会添加到元素的总高度，但下边框会增加。在某些情况下，您可能希望使用outline-bottom - 它不会增加总高度 - 而是（尽管它不像border-bottom那样受到广泛支持）。

Answer 4

使用border-bottom而不是下划线

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

更改填充底部以调整空间

Answer 5

默认情况下，使用border-bottom-width和border-bottom-style会使边框与文本颜色相同：

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;

Answer 6

有一个属性map.flyTo( xy(feature.geometry.coordinates), feature.properties['zoom'] );。但只支持Chrome和IE 10 +。

更多信息：https://css-tricks.com/almanac/properties/t/text-underline-position/ https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Answer 7

text-underline-offset中有一个 CSS Text Decoration Module Level 4 属性，该属性使您可以将装饰物从其原始位置移开指定的距离。

从2020年初开始，只有Safari 12.1+和Firefox 70+支持此功能。

text-underline-offset属性接受以下值：

auto-默认，使浏览器选择适当的偏移量。
from-font-如果使用的字体指定了首选的偏移量，请使用该偏移量，否则将退回到auto。
<length>-以“常规” CSS长度单位指定距离。使用em可以与font-size按比例缩放。

以下示例：

p {
  text-decoration: underline;
  text-decoration-color: red;
  margin-bottom: 1.5em;
}

p.test {
  position: relative;
}

p.test::after {
  position: absolute;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: blue;
  bottom: 0;
}

<p style="text-underline-offset: 0.75em;" class="test">
  If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>

<p style="text-underline-offset: auto">
  And now let’s try it with `text-underline-offset` set to `auto`.
</p>

<p style="text-underline-offset: from-font">
  With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>

Answer 8

2020

您可以使用text-underline-position: under;

<body>
   <h1>
     <a href="#"
       style="text-decoration: underline; text-underline-position: under;" >
      My link</a>
   </h1>
</body>

有关更多详细信息，请检查https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

Answer 9

我会改用边框。更容易控制。

控制文本修饰的下划线位置：下划线

9 个答案:

你可以像这样在之前和之后使用伪。它运作良好，可完全自定义。

2020