CODEWITHSUNDEEP
htmlcsshyperlinknavbar
mohsen.nour
mohsen.nour

Reputation: 1137

Put a line between links in html navigation bar

In the below html and css code how I can add separator or line between two link tag not after the link
the line should be in the middle of two link tag not after element tag 

<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}
</style>
	<!DOCTYPE html>
<html>
<head>
</head>
<body>

<ul>
  <li><a href="#home">Home |</a></li>
  <li><a href="#news">News |</a></li>
  <li><a href="#contact">Contact |</a></li>
  <li><a href="#about">About |</a></li>
</ul>

</body>
</html>

Upvotes: 0

Views: 37207

Answers (4)

khv2online
khv2online

Reputation: 100

<html>

<head>
    <style>
    .yourNav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    .yourNav li {
        float: left;
    }

    .yourNav a{
        position: relative;
    }

    .yourNav a:after{
        position: absolute;
        right: -1px;
        top: 3px;
        bottom: 3px;
        width: 3px;
        background: #fff;
        content: "";
    }

    .yourNav li:last-child a:after{
        display: none;
    }

    .yourNav a:link,
    .yourNav a:visited {
        display: block;
        width: 120px;
        font-weight: bold;
        color: #FFFFFF;
        background-color: #98bf21;
        text-align: center;
        padding: 4px;
        text-decoration: none;
        text-transform: uppercase;
    }

    a:hover,
    a:active {
        background-color: #7A991A;
    }
    </style>
</head>

<body>
    <ul class="yourNav">
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
    <script type="text/javascript">
    </script>
</body>

</html>

Upvotes: 0

Michelangelo
Michelangelo

Reputation: 5948

If you really want a symbol you can go for something like this which requires a bit more code: fiddle

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
    position:relative;
}

.divider {
    position: absolute;
    right:-1px;
    top:2px;
}


a:link, a:visited {
    display: block;
    width: 120px;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover, a:active {
    background-color: #7A991A;
}

Upvotes: 1

Manwal
Manwal

Reputation: 23816

I have added just one line in your css of li:

border-right:solid 1px #fff;

DEMO This is better way of added separator line between navbar links. Better way then added | manually after any tag.

When your Nav bar will cover complete web page width you should avoid Right-Border to last element. Like:

li:not(:last-child) { 
    border-right:solid 1px #fff;/* This will not give border to last li element */
}

Upvotes: 7

USER10
USER10

Reputation: 974

Try this ,

border-right:1px solid #FFF

Demo

Upvotes: 2

Related Questions