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:
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:
Here I added font-size
, color
and margin-right
to #menu-footer li::after
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/
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.