发表新帖
发表新帖

How to remove only underline from a:before?

后端 未结
关注
6 1909
一整个雨季
一整个雨季 2020-12-02 12:38

I have a set of styled links using the :before to apply an arrow.

It looks good in all browser, but when I apply the underline to the link, I don\'t wan

相关标签:
6条回答
  • 爱一瞬间的悲伤
    2020-12-02 13:12

    Wrap your links in spans and add the text-decoration to the span on the a:hover like this, 

    a:hover span {
   text-decoration:underline;
}

    I have updated your fiddle to what I think you are trying to do. http://jsfiddle.net/r42e5/4/

    0 讨论(0)
  • 无人及你
    2020-12-02 13:22

    use this 

    #test  p:before {
    color: #B2B2B2;
    content: "► ";

}
    0 讨论(0)
  • 余生分开走
    2020-12-02 13:27

    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.

    0 讨论(0)
  • 眼角桃花
    2020-12-02 13:27

    try using instead:

    #test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

    will that do?

    0 讨论(0)
  • 一生所求
    2020-12-02 13:30

    There is a Bug in IE8-11, so using display:inline-block; alone won't work there.

    I've found a solution for this bug, by explicitly setting text-decoration:underline; for the :before-content and then overwrite this rule again with text-decoration:none;

    a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
a:before,
a:hover:before {text-decoration:none;}

    Working example here: http://jsfiddle.net/95C2M/

    Update: Since jsfiddle does not work with IE8 anymore, just paste this simple demo-code in a local html file and open it in IE8:

    <!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <style type="text/css">
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        a:before {content:'>\a0'; text-decoration:underline; display:inline-block;}
        a:before,
        a:hover:before {text-decoration:none;}
    </style>
</head>
<body>
    <a href="#">Testlink</a> With no Underline on hover under before-content
</body>
</html>
    0 讨论(0)
  • 不知归路
    2020-12-02 13:30

    You can do it adding the following to the :before element:

    display: inline-block;
white-space: pre-wrap;

    With display: inline-block the underline disappears. But then the problem is that the space after the triangle collapses and is not shown. To fix it, you can use white-space: pre-wrap or white-space: pre.

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

    0 讨论(0)
 看不清?
提交回复
热议问题