0

In IE text-decoration: none is ignored for :after pseudo element, and the underline stretches unattractively across the bottom of the sign(>). Is there a way to make the text-decoration none for :after element?

HTML:

<div class="breadcrumb">
            <ul>

                <li><a href="#">Design&nbsp;Survey</a></li>
                <li class="end">Questions</li>
            </ul>
        </div>

CSS:

div.breadcrumb { clear: both; width: 100%; overflow: hidden; padding: 5px 0; background: linear-gradient(to bottom,  #000 0%,#333 100%) !important;  }
div.breadcrumb > ul { width: 980px; margin: 0 auto; list-style-type: none; position: relative; }
div.breadcrumb > ul > li { padding-right: 10px; float: left; background-image: none !important; font-size: 10px; font-weight: normal !important;  }
div.breadcrumb > ul > li > a { color: #00ccff !important; font-size: 11px;}
div.breadcrumb > ul > li > a:after { content: '>'; text-indent: 10px; float: right; color: #fff; text-decoration:none !important

JSfiddle: http://jsfiddle.net/t9y8W/

enter image description here

Praveen
  • 1,772
  • 3
  • 24
  • 42
  • See the "Related" section on the right? It is full of questions that seem to be the same as yours. By searching, you can find even more. Did you everything there? What was the result? – kapa Jun 04 '14 at 08:03
  • Also, in your case, you could simply add the pseudo-element to the `li`. – kapa Jun 04 '14 at 08:14
  • I checked all the related questions..nothing worked – Praveen Jun 04 '14 at 08:14
  • http://stackoverflow.com/questions/18069225/applying-text-decoration-on-css-generated-content-in-ie – kapa Jun 04 '14 at 08:14
  • the working solution you can find in the kapa's link is using some image for the arrow instead, LOL, effective way ever. – King King Jun 04 '14 at 08:45
  • @KingKing I see other solutions there too :). The accepted solution only marks which one was useful to the OP. It does not mean you should only look at that. You are free to upvote the other solutions, if there is one you like, or add yours, if you have a better one. But I guess you already know how the site works, being 25K :). – kapa Jun 04 '14 at 09:17
  • @kapa I of course looked at other solutions, but other solutions change the HTML code with additional tags, the OP may not want that, only the accepted solution seems to be fine. However I would style the `:before` or `:after` element to mimic an arrow other than using some image unless the arrow is fairly complicated. – King King Jun 04 '14 at 10:19
  • 1
    @KingKing Just one more time when IE does not let you solve problems easily :). – kapa Jun 04 '14 at 10:41

0 Answers0