伪元素离我的DIV太远了

Question

I'm doing cookie bar for website

<div id="cookie" class="md_blkn">
    <div id="cookie-content">
         <h3 class="pts">WE USE COOKIES</h3>
        <p>We use cookies to ensure that we give you the best experience on our website. If you continue without changing your settings, we will assume that you are happy to receive all cookies from this website. We use cookies to ensure that we give you the best experience on our website.</p> <a class="btn-gray-light-solid-s mbs" href="#">OKAY GOT IT</a>
    </div>
</div>

I've managed how to add icon via CSS lef to the paragraph, however I can't keep it left to cookie-content element. Could someone give me hint what I'm doing wrong? I believe it's easy for skilled CSS guy :)

Here is a live example (the (I) circle must be located near to content): http://jsfiddle.net/dpastov/kU9F6/

Answer 1

Use a percentage when setting the top position so it can scale to the content height.

#cookie-content
{
    position: relative;
}

#cookie-content:before
{
    top: 40%;
    left: -75px;
}

DEMO

Answer 2

您需要在css选择器中使用margin-top:some value #cookie-content:before是更新的小提琴