CODEWITHSUNDEEP
css
Chibi
Chibi

Reputation: 103

Making a white strikethrough in css for other browsers

I'm trying to create a white strike through in my active nav. It works in firefox but for the other browsers it only shows up in black. Is there a way to get it to be white.

HTML

<div id="menu">
    <ul class="nav nav-pills menu">
        <li class="nav_item">
            <a href="http://localhost:8888/Quadrature-cms/">HOME</a>
        </li>
        <li class="nav_item">
            <a href="http://localhost:8888/Quadrature-cms/index.php?section=2">ABOUT US</a>
        </li>
        <li class="nav_item">
            <a href="http://localhost:8888/Quadrature-cms/index.php?section=3">PORTFOLIO</a>
        </li>
        <li class="active">
            <a href="http://localhost:8888/Quadrature-cms/index.php?section=4">CONTACT US</a>
        </li>
    </ul>
</div>

CSS

.active {
    color: #fff;
    text-decoration: line-through;
}

Here is the jsfiddel: JSFIDDLE

Upvotes: 0

Views: 64

Answers (3)

Kunjan Thadani
Kunjan Thadani

Reputation: 1670

Try this:

<div id="menu">
        <ul class="nav nav-pills menu">
            <li class="nav_item">
                <a href="http://localhost:8888/Quadrature-cms/" style="color:white;text-decoration:line-through"><span style='color:black;'>HOME</span></a>

            </li>
            <li class="nav_item">
                <a href="http://localhost:8888/Quadrature-cms/index.php?section=2" style="color:white;text-decoration:line-through"><span style='color:black;'>ABOUT US</span></a>
            </li>
            <li class="nav_item">
                <a href="http://localhost:8888/Quadrature-cms/index.php?section=3" style="color:white;text-decoration:line-through"><span style='color:black;'>PORTFOLIO</span></a>
            </li>
            <li class="active">
                <a href="http://localhost:8888/Quadrature-cms/index.php?section=4" style="color:white;text-decoration:line-through"><span style='color:black;'>CONTACT US</span></a>
            </li>
        </ul>
    </div>

Upvotes: 0

j08691
j08691

Reputation: 207891

This works for me in Chrome:

.active a{
    text-decoration-color: inherit;
    text-decoration: line-through;
}
.active {
    color:#fff;
}

jsFiddle example

Upvotes: 1

Carl0s1z
Carl0s1z

Reputation: 4723

Try this setting it to the a

.active a{
        color: #fff;
        text-decoration: line-through;
    }

DEMO

Upvotes: 0

Related Questions