How to get a image in my border right - css

Question

I have a border right applied to this div. It currently runs a line down the page, I want to keep that line but also implement an image to appear in that border right line half way down the page, here is my current css:
.aboutMenuArticle {
position: fixed;
cursor: pointer;
z-index: 999;
background-color: #ffffff;
height: 100%;
left: -27%;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transition: -moz-transform 0.5s ease-in-out;
-o-transition: -o-transform 0.5s ease-in-out;
-ms-transition: -ms-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
border-right: 1px solid #e5e5e5;
}
Here is an image of how I need it to look:
Does anyone know how I could achieve this? Many thanks

Answer 1

I've done a quick fiddle where you absolutely position an after so it's sitting right in the middle. The negative value of right should be half the width of the image.
http://jsfiddle.net/n28r5/
div {
background: #CCC;
height: 200px;
width: 200px;
border-right: 1px solid #CCC;
padding: 20px;
background-clip:content-box;
position: relative;
}
div:after {
width: 20px;
height: 48px;
content: '';
display: block;
position: absolute;
top: 0;
right: -10px;
bottom: 0;
margin: auto;
background: url(http://red-rockfinancial.com/images/info.jpg);
}