css 控制文本装饰上的下划线位置：下划线

vaqhlq81 于 2023-03-24 发布在其他

关注(0)|答案(9)|浏览(196)

有没有一种方法可以控制文本装饰中下划线的位置：下划线？

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

上面的例子默认情况下有一个下划线......有没有一种方法可以将下划线向下移动几个像素，以便在文本和下划线之间有更多的空间？

css

来源：https://stackoverflow.com/questions/9586596/control-underline-position-on-text-decoration-underline

9条答案

按热度按时间

oyjwcjzk1#

2020

使用text-underline-offset！

2012

唯一的方法是使用边框而不是下划线。下划线是出了名的不灵活。

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

Here's a demo.如果空间不够，您可以轻松地添加更多-如果空间太大，则不太方便。

赞(0）回复(0）举报 2023-03-24

lf5gs5x22#

你可以像这样使用pseudo前后，效果很好，完全可定制。

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/

赞(0）回复(0）举报 2023-03-24

epggiuax3#

CSS 3中有提议的text-underline-position属性，但似乎还没有在任何浏览器中实现。
因此，您需要使用解决方案，即抑制下划线并添加底部边框，如其他答案中所建议的那样。
请注意下划线不会增加元素的总高度，但底部边框会。在某些情况下，您可能希望使用outline-bottom-它不会增加总高度-而不是（尽管它不像border-bottom那样广泛支持）。

赞(0）回复(0）举报 2023-03-24

5fjcxozz4#

2021年
CSS Text Decoration Module Level 4中有**text-underline-offset**属性，可以将装饰从原始位置移动指定的距离。
支持Safari 12.1+、Firefox 70+和Chrome 87+（2020-11-17发布）。
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>

赞(0）回复(0）举报 2023-03-24

a0zr77ik5#

2023年

可以使用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

赞(0）回复(0）举报 2023-03-24

f87krz0w6#

使用底部边框代替下划线

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

改变填充底部以调整空间

赞(0）回复(0）举报 2023-03-24

s8vozzvw7#

使用border-bottom-width和border-bottom-style将使边框默认为与文本相同的颜色：

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

赞(0）回复(0）举报 2023-03-24

cyvaqqii8#

有一个属性text-underline-position: under。但仅在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

赞(0）回复(0）举报 2023-03-24

3duebb1j9#

我会用边框来代替，这样更容易控制。

赞(0）回复(0）举报 2023-03-24

我来回答

css 控制文本装饰上的下划线位置：下划线

9条答案

2020

2012

你可以像这样使用pseudo前后，效果很好，完全可定制。

2023年

相关问题

热门标签

最新问答