CSS - Underline Text But Ignore The Spaces

CSS - Underline text but ignore the spaces

The spaces come from the line-breaks (well-known from the display:inline-block problematic).

So make your a elements display: block and float them to the left.

DEMO

PS: The display:block is "redundant", as float normally already sets the display property of the respective element to "block". But it do no harm ...!

How to avoid whitespace anchor underline w/o changing coding style?

You can emulate the effect with some CSS:

img {
    border: 1px solid #CCC;
    padding: 10px;
    vertical-align: middle;
    float:left;
}

a {
    display:block;
    height:70px;
    line-height:70px;
}

http://jsfiddle.net/DNhAk/8/

stop links having an underline on a space?

Add a margin to your image - DEMO

img {
    margin-right: 15px
}

Avoid underlining the trailing space before line wrap in Chrome

The problem isn't that Chrome is underlining the trailing space while Firefox isn't. The problem is that Chrome isn't removing the trailing space when wrapping the line (when the wrap originates from a hard <br /> wrap). The space is underlined because it is there, which is inconsistent with how Chrome handles trailing spaces when auto-wrapping text.

The CSS specification on handling trailing spaces on wrapped text states:

4.1.3. Phase II: Trimming and Positioning

As each line is laid out,

1. A sequence of collapsible spaces at the beginning of a line is removed.
2. If the tab size is zero, tabs are not rendered. Otherwise, each tab is rendered as a horizontal shift that lines up the start edge of the next glyph with the next tab stop. Tab stops occur at points that are multiples of the tab size from the block’s starting content edge. The tab size is given by the tab-size property.
3. A sequence of collapsible spaces at the end of a line is removed.
4. If spaces or tabs at the end of a line are non-collapsible but have white-space set to pre-wrap the UA must either hang the white space or visually collapse the character advance widths of any overflowing spaces such that they don’t take up space in the line. However, if overflow-wrap is set to break-spaces, collapsing their advance width is not allowed, as this would prevent the preserved spaces from wrapping.

The CSS Working Group has discussed the inconsistent handling of trailing white-space on their github repo, specifically mentioning that Firefox's handling of trailing whitespace is the most ideal:

And lastly there's the point that trailing spaces just look bad, and that having a space just inside the closing tag of an inline or before a <br> is a reasonably common unintentional markup pattern that shouldn't have a bad effect on rendering. The preserved trailing space becomes noticeable both when the inline is styled, as in the example given by @palemieux, and also when we chose text alignments other than start. This gives a real-world use case indicating a preference for Firefox's behavior.

From this discussion, the earlier mentioned CSS spec has been updated (in the github repo, but not apparently published yet) to match the Firefox (Gecko) behavior. Specifically updating points 1 and 3 from above to :

A sequence of collapsible spaces at the beginning of a line (ignoring any intervening inline box boundaries) is removed.

A sequence of collapsible spaces at the end of a line (ignoring any intervening inline box boundaries) is removed.

Emphasis on changes added by me.

Remove space below the text baseline with CSS

You need to reset the line-height so it's not bigger than 1. The initial value is normal which depends on the User Agent of the browser, on the font-family and on the font-size, but it's some number between 1 and 1.2 in general. Here's more information if you're interested.

div {  font-size: 72pt;  display: inline-block;  text-decoration: underline;  border: 1px solid red;  margin: 10px;  text-align: center;  line-height: 1;}

<div lang="ja">日本語</div><div lang="en">English</div>

How to make a line below text without text-decoration: underline?

You can use Border-Bottom with some Padding-Bottom.

a {border-bottom: 1px solid black;padding-bottom: 5px;}

<a>Example Text</a>

How to remove only underline from a:before?

Is it possible to remove this?

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

This is because the CSS specs say:

When specified on or propagated to an inline element, it affects all the boxes generated by that element, and is further propagated to any in-flow block-level boxes that split the inline (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

(Emphasis mine.)

Demo: http://jsfiddle.net/r42e5/10/

_{Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.}

---

Related Topics