CSS减少文本和边框之间的空间

Posted 2023-02-23

【中文标题】CSS减少文本和边框之间的空间

【英文标题】：CSS decrease space between text and border

【发布时间】：2013-01-21 21:12:44

【问题描述】：

当悬停链接时，我希望它有下划线。 下划线应该是 2px 强，在文本下方 4px。

有

text-decoration: underline

我得到一个 1px 的强线，它在下面 4px。 （距离因字体而异）

如果我写

border-bottom: 2px solid #000;

我得到一个 2px 的线，它在文本下方大约 10px。

如何减少文本和边框之间的距离？

padding-bottom: -6px

不起作用。任何带有 padding-bottom 的负值都不起作用。

或者我怎样才能让下划线变强 2px？

http://jsfiddle.net/qJE2w/1/

【问题讨论】：

padding-bottom 不能有负值，试试 margin-bottom

【参考方案1】：

我想到的一个快速解决方案是在伪元素上应用边框：

.border
    position: relative;


.border:hover::after
    content:'';
    position:absolute;
    width: 100%;
    height: 0;    
    left:0;
    bottom: 4px;                    /* <- distance */
    border-bottom: 2px solid #000;  

(example)

【讨论】：

很遗憾，这不适用于多行链接

【参考方案2】：

您可以使用 line-height 来减少距离。

.underline 
  display: inline-block;
  line-height: 0.9; // the distance
  border-bottom: 1px solid;

这种方法的缺点——因为我们使用块显示，它只适用于单行文本。

【参考方案3】：

您可以使用background 和linear-gradient 来生成边框，并且可以将其放置在任何位置。

例如：

background-image: linear-gradient(currentColor, currentColor);
background-position: 0 95%; /* determines how far from bottom */
background-repeat: no-repeat;
background-size: 100% 5px; /* second value determines height of border */

http://jsfiddle.net/1mg4tkwx/

信用：https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

【参考方案4】：

多线解决方案

解释。 我正在创建一个具有相同文本和文本样式的同级，并稍微移到顶部。如果你想保持你的代码干净，你可以在页面加载事件中使用 JS 插入兄弟。

限制。此解决方案不适用于文本段落。

.underlined_link 
  text-decoration: none;
  display: inline;

.underlined_link h2,
.underlined_link div 
  display: inline;
  font-size: 20px;
  margin: 0;
  line-height: 35px;
  font-weight: normal;
  padding: 0;

.underlined_link h2 
  color: transparent;
  border-bottom: 1px solid red;

.underlined_link div 
  position: absolute;
  top: 10px;
  left: 8px;

<a class="underlined_link" href="#">
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</h2>
  <div><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu nulla vel massa efficitur lacinia. In at dolor ac nulla interdum convallis. Nullam vitae eros orci. Curabitur vitae maximus erat, vel pulvinar ex.</span></div>
</a>

【参考方案5】：

这条线适合我：

.main-nav ul li 
    padding: 0 10px;

.main-nav .main-menu  li a 
    border-right: 2px solid #262626; 
    padding: 7px;

【参考方案6】：

我发现一个很酷的解决方案是使用轮廓应用边框，然后在轮廓偏移属性中使用负值。

.outline-border 
  outline: 2px solid red;
  outline-offset: -2px; 

【讨论】：

当元素在多行中运行时，这将不起作用。但是现在您可以使用 css 设置下划线的偏移量：developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset。还有厚度。