How to style a CSS pseudo-element without an underline decoration inside a link?

Question

Is it possible to add a :before pseudo-element by CSS to an A html tag without showing the underline text decoration for the pseudo-element?

In the following markup, a "+" symbol is added on the left of the link that it's correctly underlined on mouse over however also the pseudo-symbol "+" is underlined even if the css rule is set to "h3 a:before:hover{ text-decoration:none; }"

<style>
h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ content: '+'; margin:0; padding: 4px; }
h3 a:hover:before{ text-decoration:none; }
</style>

<h3>My Title <a href="#">link</a></h3>

For anyone willing to take a stab at it... here's a jsbin to play with: http://jsbin.com/oVOhoSej/1/edit. Very interesting question, as I haven't found a way to accomplish this yet. — Charlie74, Dec 05 '13 at 16:07

Clint · Answer 1 · 2016-02-15T16:12:58.143

22

Setting the :before element to display:inline-block; will make it take the text-decoration:none; style.

http://jsfiddle.net/KpRg7/3

  h3 a:before{
      display:inline-block;
      content: '+';
      margin:0;
      padding: 4px;
      text-decoration:none;
  }

edited Feb 15 '16 at 16:12

answered Dec 05 '13 at 16:14

Clint

471
3
12

1

It works perfectly on FF and Chrome, however not in IE (I've tested the jsfiddle example on IE v.11) – Max Dec 05 '13 at 17:02
2

I think there's a bug on IE (I've tested the fiddle on IE v.11); in the following example http://jsfiddle.net/T4knZ/ setting "underline" (instead of "none") at line 25, IE correctly interprets the style! At last, setting text-decoration to "none" as in the @Clint suggestion, does not work anymore on IE. – Max Dec 05 '13 at 17:57
I found this solution which is much better http://stackoverflow.com/a/31330454/1214294 – Yacine Zalouani Feb 12 '16 at 17:19

score 3 · Answer 2 · answered Dec 05 '13 at 16:27

3

Well I can contribute to the answer, but don't have the solution. Instead of h3 a:before:hover, reverse the pseudo classes, i.e. h3 a:hover:before. That will at least target the :before portion properly.

answered Dec 05 '13 at 16:27

Eric

409
3
9

1

Good catch Eric. You're right, that doesn't make the :before el take the styles but it is the correct way to write the selector. – Clint Dec 05 '13 at 16:31

score 1 · Answer 3 · answered Apr 12 '14 at 18:10

1

my only solution to this problem that works against IE is to have content added as a background. In css content:''; instead of + and add what's needed with background image sprite. This way IE will not show underline.

answered Apr 12 '14 at 18:10

Iggy

2,014
25
21

score 0 · Answer 4 · answered Dec 05 '13 at 19:29

I believe the :before pseudo element is placed inside the element but before its content. As such the before element is still a child of that a and will take up space within that element. The underline you are seeing is not part of the :before element but the anchor element.

As such I believe you have to take the :before element out of the natural flow with absolute positioning.

http://jsfiddle.net/KmWL2/

h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:block;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';
    position: relative;
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ 
    content: '+'; 
    margin:0; 
    padding: 4px;
    position: absolute;
    left: -15px;
    top: 3px;
}
h3 a:hover:before{ text-decoration:none; }

score 0 · Answer 5 · answered Mar 11 '14 at 09:37

0

You could check my solution here: http://codepen.io/gml/pen/CEstr The trick for IE is that you need to set height and overflow hidden on the pseudo element. That way the underline gets cut-off.

answered Mar 11 '14 at 09:37

Gml

1

score 0 · Answer 6 · answered May 15 '14 at 12:52

There is not any other solution than emulate the underline effect with another pseudo element…

@see http://jsfiddle.net/KpRg7/9/

h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}

h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}

h3 a:before{ 
    content: '+'; 
    margin:0; 
    padding: 4px;
    position: absolute;
    left: -15px;
    top: 3px;
}

h3 a:hover { position: relative; }

h3 a:hover:after{ content:""; position: absolute; height: 1px;  
    right: 4px; /* depends of the right padding */
    left: 0; /* depends of the left padding */
    background-color: blue; /* depends of the link color */
    top: 22px; /* depends of the overall line-height */ }

How to style a CSS pseudo-element without an underline decoration inside a link?

6 Answers6