CODEWITHSUNDEEP
htmlcss
Linus Oleander
Linus Oleander

Reputation: 18127

Remove space and underscore between link and text

I've this snipped for which I want to remove the space between the link and the upcoming text, but I can't figure our how to do it. I've tried using padding and margin, but nothing works.

HTML:

A <a href="#" style="letter-spacing: 1em;">link</a>. Some text.

Output:

enter image description here

Here's is an example: http://codepen.io/anon/pen/gPQVXx

Upvotes: 1

Views: 1375

Answers (6)

Vincent Vanille
Vincent Vanille

Reputation: 106

Although this answer has been accepted, I do not recommend using it. It breaks in some browsers and won't be compatible with screen-readers. Besides that, it is also bad practice to just flip letters around. I've created this answer to show some of the possibilities, not as a good solution

That being said. Here it is.

It does require some extra effort, but it works without the use of negative margins or extra html.

You basically have to swap all the letters around, and you're good to go!

This works because of the use of two things. letter-direction and :first-letter.

a{
  display: inline-block;
  letter-spacing: 1em;
  direction: rtl;
  unicode-bidi: bidi-override;
}

a:first-letter{
  letter-spacing: 0;
}

This would've been much easier with a :last-letterselector :)

Hope this helps

Upvotes: 1

Oriol
Oriol

Reputation: 288080

This behavior is a clear violation of the spec.

A given value of letter-spacing only affects the spacing between characters completely contained within the element for which it is specified:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>bb</span>c</p>

enter image description here

This also means that applying letter-spacing to an element containing only a single character has no effect on the rendered result:

p    { letter-spacing: 1em; }
span { letter-spacing: 2em; }
<p>a<span>b</span>c</p>

enter image description here

An inline box only includes letter spacing between characters completely contained within that element:

p    { letter-spacing: 1em; }
<p>a<span>bb</span>c</p>

enter image description here

It is incorrect to include the letter spacing on the right or trailing edge of the element:

enter image description here

You only have to wait until browsers fix this. I suggest against fixing it with hacks like negative margins because it will backfire when browsers implement the standard behavior.

Upvotes: 2

Ivin Raj
Ivin Raj

Reputation: 3429

you can try this one:

A <a href="#" style="letter-spacing: 1em;">lin<span>k</span></a>. Some text.

CSS

span{
  letter-spacing: 0;
}

HERE MY DEMO

Upvotes: -1

CaliKane
CaliKane

Reputation: 114

A <a href="#" style="letter-spacing: 1em;">lin</a><a href="#">k</a>. Some text

This is ugly, but it does the trick. JSFiddle

Upvotes: 1

Shariq Ansari
Shariq Ansari

Reputation: 4641

Try this

    A <a href="#" ><span style="letter-spacing: 1em;">lin</span>k</a>. Some text.

Upvotes: -1

partypete25
partypete25

Reputation: 4413

You could try removing the letter-spacing on the last letter of the word.

A <a href="#" style="letter-spacing: 1em;">lin<span style="letter-spacing: 0;">k</span></a>. Some text.

It's not a neat solution, but if it's a one-off it'll get the job done. If not for the underline from the link, a negative right margin equal to the letter spacing would have done the trick as well.

Upvotes: 2

Related Questions