Lines inbetween menus

I’m trying to add lines inbetween a menu but I can’t see how to change the height, color and more space to the right

see my footer here:

http://www.williamandcooper.com

Here I added font-size, color and margin-right to #menu-footer li::after


Add those and tweak to your liking.

I would like to suggest another method of adding a pipe between the list items.

You will need to delete the styles that SamA74 recommended.

Copy this working page to a file and open it in your browser. See that it works.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>pipe between list items</title>
<!--
delete these custom styles

#menu-footer li::after {
    content: "|";
    line-height: 40px;
}
-->
    <style type="text/css">
body {
    background-color:#000;
    font-family:Arial,sans-serif;
}
.outer {
    margin:0 auto;
}
ul {
    list-style:none;
    text-align:center;
    padding:0;
    margin:0;
}
li {
    display:inline;
}
li a {
    display:inline-block;
    color: #e6be32;
    font-size: 16px;
    line-height: 22px;
    text-decoration: none;
    letter-spacing: 6px;
/*    padding-right: 20px;  /* DELETE ME */
    padding-right:10px;  /* ADD ME */
    padding-left:10px;  /* ADD ME */
}

/* ADD THIS SELECTOR AND STYLES */
li + li:before {
    content:"| ";
    color: #fff;
    font-size: 1.25em;  /* height of bar is determined by size of font */
    line-height:1;
}
    </style>
</head>
<body>

<div class="outer">
    <ul id="menu-footer" class="menu">
        <li id="menu-item-15117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15117">
            <a href="http://williamandcooper.com/delivery/">DELIVERY</a>
        </li>
        <li id="menu-item-15116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15116">
            <a href="http://williamandcooper.com/returns/">PRIVACY</a>
        </li>
        <li id="menu-item-15115" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15115">
            <a href="http://williamandcooper.com/bespoke/">BESPOKE</a>
        </li>
        <li id="menu-item-15114" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15114">
            <a href="http://williamandcooper.com/careers-2/">CAREERS</a>
        </li>
    </ul>
</div>

</body>
</html>

I’ve been looking a while online for different ways to do this, this seems the best one.

1 - Why is there display inline on this li and then and inline-block on the li a?
2 - Can you explaine the li + li before is that the same as the shorthand li, li:before?

The <li>s are inline so they will align horizontally. “inline-block” would have worked just as well, but I believe that “inline” was already in your code.
The anchor is inline-block so it can contain vertical padding and so it will align to the right of the generated content with the pipe symbol.

The plus is called the Adjacent Sibling Combinator. You can read about all of the CSS selectors, including the Adjacent Sibling Combinator, here http://www.sitepoint.com/web-foundations/css-selectors/

I like this technique because one can apply the generated content only where needed. There is no extra first-child or last-child object that needs to be deleted. Seems pretty efficient to me.

The Adjacent Sibling Combinator is not shorthand. What you have written is not shorthand, either. (I don’t remember hearing it called shorthand, anyway.) The comma is a grouping mechanism. It separates individual selectors that use common CSS.

li, li:before {}

is the same as

li, 
li:before {}

which is the same as

li {}
li:before {}

assuming the code within the parens is the same.

You can read about Selector Grouping here
http://www.sitepoint.com/web-foundations/selector-grouping/

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.