Я пытаюсь создать вертикальную черту внутри переполненного элемента, используя псевдоэлемент before
:
.comments:before {
width: 3px;
top: -20px;
bottom: -20px;
background: rgba(0,0,0,0.1);
}
Проблема, как вы можете видеть в демонстрационной версии, заключается в том, что вертикальная полоса создается только ввидимая часть div.Ожидаемый результат - вертикальная черта во всем элементе div, даже в скрытой части.
.comments {
overflow: auto;
height: 200px;
}
.comment {
overflow: hidden;
padding: 0 0 1em;
margin: 0 0 1em;
*zoom: 1;
}
.comment-img {
float: left;
margin-right: 33px;
border-radius: 5px;
overflow: hidden;
}
.comment-img img {
display: block;
}
.comment-body {
overflow: hidden;
}
.comment .text {
padding: 10px;
border: 1px solid #e5e5e5;
border-radius: 5px;
background: #fff;
}
.comment .text p:last-child {
margin: 0;
}
.comment .attribution {
margin: 0.5em 0 0;
font-size: 14px;
color: #666;
}
/* Decoration */
.comments,
.comment {
position: relative;
}
.comments:before,
.comment:before,
.comment .text:before {
content: "";
position: absolute;
top: 0;
left: 65px;
}
.comments:before {
width: 3px;
top: -20px;
bottom: -20px;
background: rgba(0, 0, 0, 0.1);
}
.comment:before {
width: 9px;
height: 9px;
border: 3px solid #fff;
border-radius: 100px;
margin: 16px 0 0 -6px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(0, 0, 0, 0.1);
background: #ccc;
}
.comment:hover:before {
background: orange;
}
.comment .text:before {
top: 18px;
left: 78px;
width: 9px;
height: 9px;
border-width: 0 0 1px 1px;
border-style: solid;
border-color: #e5e5e5;
background: #fff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<section class="comments">
<article class="comment">
<a class="comment-img" href="#non">
<img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<p>Hello, this is an example from me</p>
</div>
<p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p>
</div>
</article>
<article class="comment">
<a class="comment-img" href="#non">
<img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<p>if you are interested for more about me visited my profile on social page</p>
<p>To visit me you can click my name <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik Hetemi</a> and send me frends request or send me a message in inbox</p>
</div>
<p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p>
</div>
</article>
<article class="comment">
<a class="comment-img" href="#non">
<img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<p>if you are interested for more about me visited my profile on social page</p>
<p>To visit me you can click my name <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik Hetemi</a> and send me frends request or send me a message in inbox</p>
</div>
<p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p>
</div>
</article>
<article class="comment">
<a class="comment-img" href="#non">
<img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<p>if you are interested for more about me visited my profile on social page</p>
<p>To visit me you can click my name <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik Hetemi</a> and send me frends request or send me a message in inbox</p>
</div>
<p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p>
</div>
</article>
<article class="comment">
<a class="comment-img" href="#non">
<img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<p>if you are interested for more about me visited my profile on social page</p>
<p>To visit me you can click my name <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik Hetemi</a> and send me frends request or send me a message in inbox</p>
</div>
<p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p>
</div>
</article>
<article class="comment">
<a class="comment-img" href="#non">
<img src="https://pbs.twimg.com/profile_images/444197466133385216/UA08zh-B.jpeg" alt="" width="50" height="50">
</a>
<div class="comment-body">
<div class="text">
<p>if you are interested for more about me visited my profile on social page</p>
<p>To visit me you can click my name <a target="_blank" href="http://www.facebook.com/besnik.hetemii">Besnik Hetemi</a> and send me frends request or send me a message in inbox</p>
</div>
<p class="attribution">by <a href="#non">Besnik Hetemi</a> at 14:23pm, 4 Dec 2015</p>
</div>
</article>
</section>
Посмотреть на JSFiddle