web-dev-qa-db-ja.com

CSSはテキストと境界線の間のスペースを減らします

リンクにカーソルを合わせると、下線が引かれます。下線は、テキストの下に2ピクセル、4ピクセル下にする必要があります。

と

text-decoration: underline

私は4px下にある1pxの強い線を取得します。 （距離はフォントによって異なります）

私が書いたら

border-bottom: 2px solid #000;

テキストの下約10pxの2pxの線が表示されます。

テキストと境界線の間の距離を短くするにはどうすればよいですか？

padding-bottom: -6px

動作しません。 padding-bottomを使用した負の値は機能しません。

または、アンダースコアを2px強くするにはどうすればよいですか？

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

cssborderunderline
12
obs

私の頭に浮かぶ簡単な解決策の1つは、疑似要素に境界線を適用することです。

.border{
    position: relative;
}

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

（ 例 ）

16
nice ass

距離を短くするには、線の高さを使用できます。

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

このメソッドの欠点-ブロック表示を使用しているため、テキストの1行に対してのみ機能します。

5
vatavale

マルチラインソリューション

説明。同じテキストとテキストスタイルを持ち、少し上に移動した兄弟を作成しています。コードをクリーンに保ちたい場合は、ページの読み込みイベントで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>
0
Dmitry Kulahin

backgroundとlinear-gradientを使用して境界線を作成し、それを使用してどこにでも配置できます。

例えば：

background-image: linear-gradient(currentColor, currentColor);
background-position: 0 94%;
background-repeat: no-repeat;
background-size: 0;

http://jsfiddle.net/1mg4tkwx/

クレジット： https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

0
Estevão Lucas