4

Web サイトのメニューで、CSS のタイポグラフィに関する顧客の要望をいくつか実装しました。彼女はフォントで別のトラッキングを必要としていますが、問題ありません。しかし、彼女はアクティブなリンクに下線を付けたいと考えています。アクティブなリンクをターゲットにするコードを実装していないので、どのように見えるかを確認するためにすべてに下線を引きました。CSS は次のとおりです。

.main-navigation a {
    display: block;
    color: black;
    font-weight: bold;
    letter-spacing: 0.45em;
    line-height: 4.5em;
    text-decoration: underline;
    text-transform: uppercase;
}

そして、これは結果です：

スタイル付きリンクを含む Web サイトのメニュー

問題は、文字間隔が下線を台無しにすることです。問題を示すために、いくつかの投票マグネットにフリーハンドの円を描きました。線は左側から適切に始まりますがletter-spacing、右に の値で延長されます。

スクリーンショットは Firefox 25のものです。

境界線を使用し、行の高さの代わりに余白を使用してこれを解決できますが、それ以外の方法で修正できますか?

4

1 に答える 1

3

文字間隔が適用されている場合、CSSテキストの下線が長すぎますか?

http://jsfiddle.net/isherwood/JWcGh/2

.main-navigation a:after {
  /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
  position: absolute;
  /* the same width as our letter-spacing property on the h1 element */
  width: 0.45em;
  /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
  height: 200%;
  /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
  background-color: #fff;
  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
  content: ".";
  /* hide the dynamic text you've just added off the screen somewhere */
  text-indent: -9999em;
  /* this is the magic part - pull the mask off the left and hide the underline beneath */
  margin-left: -.40em;
}
于 2013-12-13T18:32:34.303 に答える