CODEWITHSUNDEEP
css
David Braun
David Braun

Reputation: 409

css avoid border-bottom on :after

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)?

Upvotes: 1

Views: 1121

Answers (3)

Oriol
Oriol

Reputation: 287980

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

Upvotes: 3

Oriol
Oriol

Reputation: 287980

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>

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

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>

Upvotes: 1

Related Questions