Struggling to find a solution here. I have a menu with a unique bar design between list elements, featuring breaks at the top and bottom.
I attempted to use li:after in the CSS to insert an image, but encountered issues with padding and margin. Below is the embedded CSS and HTML code (Bootstrap framework is being used). Any suggestions on how to make these bars function correctly?
Screenshot:
(Please disregard the red color from illustrator).
https://i.stack.imgur.com/AdHEk.png
#reviews .review-actions {
text-align: center;
z-index: 2;
padding-top: 1px;
}
#reviews nav {
display:inline-block;
margin:0 auto;
}
#reviews nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#reviews nav ul li{
display: inline;
margin: 0;
float: left;
padding: 10px;
background-color: #fff;
font-size:1.2em;
}
/*#reviews nav ul li:after{
content: url('./img/menu-splitter.png');
}*/
#reviews nav ul > li:first-child {
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
border: 1px solid #ccd0d0;
border-right: none;
}
#reviews nav ul > li:nth-child(2){
border: 1px solid #ccd0d0;
border-right: none;
border-left: none;
}
#reviews nav ul > li:last-child {
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
border: 1px solid #ccd0d0;
border-left: none;
}
#reviews nav ul li a{
} <section id='reviews'>
<!-- Navigation -->
<div class="review-actions">
<nav>
<ul>
<li><a href='#'>The App</a></li>
<li><a href='#'>Our Service</a></li>
<li><a href='#'>Surprises</a></li>
</ul>
</nav>
</div>
</section>