Gerard Gerard - 3 months ago 8
CSS Question

HTML CSS, ::after additions do not respect the overflow:hidden of the parent

The following code does not respect the overflow:hidden boundaries, and this is causing a mess with my code where I have many consecutive lines.

You can see (jsfiddle below) that it does respect it with regard to the text ("Test"), but not with what is defined in the ::after item.

How can I solve / workaround this?

UPDATE: it makes sense that by removing the position:absolute in the ::after element then the boundaries are respected, but then the "icon" is not seen anymore

html

<div class="wrap">
<div><a href="/" class="btn icon">Test</a></div>
<div><a href="/" class="btn icon">Test</a></div>
<div><a href="/" class="btn icon">Test</a></div>
</div>


css

body { padding: 50px 0; }

.wrap {
background: grey;
height:18px;
overflow:hidden;
}

.btn {
border: 1px solid #999;
border-radius: 8px;
}

.icon {}

.icon::after {
content:"";
position:absolute;
margin-left:6px;
margin-top:1px;
width:4px;
height:6px;
background:#fff;
border:1px solid #444;
opacity:0.8;
}


http://jsfiddle.net/jsedv6kw/1/

Answer

Try this:

.icon {position: relative;}

http://jsfiddle.net/jsedv6kw/2/