Make :after the same size as its element - html

Question

I have a nav menu that has different size cells for each item. Under each item I want a triangle image to indicate the active menu item.
How can I make the :after reflect the same size as the parent so that I can have the content of the :after centered properly?
Code for the menu:
<div class="nav-collapse collapse">
<ul class="nav nav-pills">
<li>Clients</li>
<li>Solutions</li>
<li>Services</li>
<li>Your Business</li>
<li>Security</li>
<li>Partners</li>
<li>Contact</li>
</ul>
</div>

Answer 1

The way here is use absolute position on the :after element and use the li or a tag parent as relative. Like this:
.nav > li a {
position: relative;
}
.nav > li a:after {
content: "\25B2";
position: absolute;
left: 50%;
transform: translate(-50%, -100%);
}
Check The Snippet
* {
margin: 0;
padding: 0
}
.nav > li {
height: 70px;
line-height: 70px;
background: orange;
list-style: none;
margin: 1px;
float: left;
}
.nav > li a {
position: relative;
padding: 0 15px;
display: block;
color: white;
font-family: 'verdana';
text-decoration: none;
transition: background .3s ease
}
.nav > li a:hover {
background: red;
}
.nav > li a:after {
content: "\25B2";
position: absolute;
color: white;
top: 100%;
line-height: normal;
left: 50%;
transform: translate(-50%, -100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav-collapse collapse">
<ul class="nav nav-pills">
<li>Clients
</li>
<li>Solutions
</li>
<li>Services
</li>
<li>Your Business
</li>
<li>Security
</li>
<li>Partners
</li>
<li>Contact
</li>
</ul>
</div>

Answer 2

Try this css, include text in the content: " " and set the color to transparent via rgba. then set background to an image
.nav-pills {
width: 100%;
display:block;
list-style:none;
}
.nav-pills li{
display:inline;
float:left;
margin: 0 20px;
padding:4px 10px
background:#d7d7d7;
text-align:center;
}
.nav-pills li::after {
content: " Image";
padding: 4px 10px;
background:url(images/image.png);
background-color:orange;
color: rgba(255,255,255,0);
display:block;
}
Check out my codepen here