css avoid border-bottom on :after

Question

I managed to decorate all links that go outside my website with a little globe, which looks like this:

a {border-bottom: 1px dotted silver;}

a:not([href^="http://davidbraun.ch"]):after{
    content: ' O';
    font: 75% 'PantonIcons-BRegular';
    vertical-align: super;
    color:#0b1b3c;
    border-bottom: none !important; /* doesn't work :-( */
}

But: Can I get it to not have text-decoration (it is the border-bottom 1px dotted from the 1st line)?

score 3 · Accepted Answer · answered May 01 '15 at 15:39

Preventing text-decoration from affecting the descendants is not trivial. However, since you use borders instead of text-decoration, it's even more difficult. But still possible.

If your a elements are inline (they are by default), you can use float: right:

a {
  text-decoration: none;
  border-bottom: 1px dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
  content: ' O';
  font: 75%'PantonIcons-BRegular';
  vertical-align: super;
  color: #0b1b3c;
  float: right;
}

Foo
<a href="http://example.com">http://stackoverflow.com</a>
Bar

But that will move the ::after too far. So you will need an inline-block wrapper:

.link {
  display: inline-block;
}
a {
  text-decoration: none;
  border-bottom: 1px dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
  content: ' O';
  font: 75%'PantonIcons-BRegular';
  vertical-align: super;
  color: #0b1b3c;
  float: right;
}

Foo
<span class="link">
  <a href="http://example.com">http://stackoverflow.com</a>
</span>
Bar

There is also the position: absolute approach:

a {
  text-decoration: none;
  border-bottom: 1px dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
  content: ' O';
  font: 75%'PantonIcons-BRegular';
  vertical-align: super;
  color: #0b1b3c;
  position: absolute;
}

Foo
<a href="http://example.com">http://stackoverflow.com</a>
Bar

However, now the ::after will overlap following content, so you should add some margin-right to a:

a {
  text-decoration: none;
  border-bottom: 1px dotted silver;
  margin-right: .5em;
}
a:not([href^="http://davidbraun.ch"]):after {
  content: ' O';
  font: 75%'PantonIcons-BRegular';
  vertical-align: super;
  color: #0b1b3c;
  position: absolute;
}

Foo
<a href="http://example.com">http://stackoverflow.com</a>
Bar

Oriol, you are my **Hero** :-) thanks very much! all the best - david — David Braun, May 01 '15 at 18:27

score 1 · Answer 2 · answered May 01 '15 at 13:46

You style a with border-bottom, however you're trying to override it with the pseudo-element ::after, this is actually a different element with its own styles. You should override the border-bottom without the ::after.

Also you don't need !important here since a:not() has a higher specificity than a.

a {
  border-bottom: 5px dotted silver;
}
a:not([href^="http://davidbraun.ch"]) {
  border-bottom: none;
}

<a href="http://davidbraun.ch">http://davidbraun.ch</a>
<a href="http://stackoverflow.com">http://stackoverflow.com</a>

This removes the border on all the link. I think OP only wants to remove it on the `::after`. — Oriol, May 01 '15 at 14:53

score 1 · Answer 3 · edited May 23 '17 at 11:58

Note borders are not text decoration. Text decoration is done with text-decoration property:

a {
    text-decoration: underline; /* CSS 2.1 fallback */
    text-decoration: underline dotted silver; /* CSS3 */
}

This property usually affects all descendants, even if they have text-decoration: none.

But this can be avoided with display: inline-block, as explained in this answer.

a:not([href^="http://davidbraun.ch"]):after {
    display: inline-block;
}

a {
  text-decoration: underline;
  text-decoration: underline dotted silver;
}
a:not([href^="http://davidbraun.ch"]):after {
  content: ' O';
  font: 75%'PantonIcons-BRegular';
  vertical-align: super;
  color: #0b1b3c;
  display: inline-block;
}

<a href="http://davidbraun.ch">http://davidbraun.ch</a>
<a href="http://stackoverflow.com">http://stackoverflow.com</a>

Well. I know a border is a border and not a text-decoration. I chose to still misuse it as such because it gives me a bit more freedom (spacing and such). Unfortunately it seems that in consequence, I won't get rid of this tiny little bit of border-bottom... But thanks, Oriol and @DanielImms — David Braun, May 01 '15 at 15:05

css avoid border-bottom on :after

3 Answers3