<div class="test">
<div class="img"></div>
</div>.test {
width: 800px;
height: 200px;
border: 10px solid #bebebe;
border-bottom: none;
margin: 100px auto;
position: relative;
}
.test:after {
content: '';
display: block;
width: 100%;
height: 10px;
background: #bebebe;
position: absolute;
left: 0;
bottom: 0;
}
.img {
width: 200px;
height: 400px;
background: yellow;
margin: -100px auto 0;
}.phone-top нет соседнего p:fist-of-type или :nth-of-type()для p.:fist-of-child или :nth-of-child() для .phone-top..phone-top p:fist-of-type{
...
}.phone-top:fist-child{
...
}<section>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</section>.container {
width: 500px;
height: 200px;
margin: auto;
background: green;
position: relative;
}
.container:before {
content: '';
display: block;
width: 1000px;
height: 100%;
background: green;
position: absolute;
left: -1000px;
top: 0;
}
section {
overflow-x: hidden;
}overflow-x:hidden для html и body при использовании <meta name="viewport">
<div class="example"></div>.example {
width: 300px;
height: 50px;
margin: 50px auto;
background: yellow;
cursor: pointer;
position: relative;
}
.example:before {
content: '';
display: block;
width: 0;
height: 5px;
background: red;
position: absolute;
left: 50%;
bottom: 0;
transition: .5s;
}
.example:hover:before {
width: 100%;
left: 0;
}