<div class="wrap">
<div class="content">Какой-то текст</div>
</div>.wrap {
position: relative;
width: 50%;
//height: auto;
margin: 20px auto;
background: #eee;
}
.wrap::after {
content: '';
display: block;
padding-top: 100%; /*установите ваши пропорции, в данном случае квадрат*/
width: 1px; /*ширина только для наглядности - УДАЛИТЕ*/
background: #f00; /*фон только для наглядности - УДАЛИТЕ*/
}
.content {
position: absolute;
background: #555;
top: 0;
left: 0;
bottom: 0;
right: 0;
}@charsetс указанием нужной кодировки в начало CSS файла
position:static, то width:100% для абсолютно-позиционированного ребенка и так будет считаться от body или от ближайшего предка с position отличного от static.
.service__sect-content_accordeon_item p выше, чем у .active
background: linear-gradient(5deg, #fff 0, #fff 100px, transparent 101px),
linear-gradient(to bottom, #ffc826, #9f19ff, #00aee7);
НО при сужении экрана, заголовок "давит на текст"
<p>, а главное еще вдруг самостоятельный закрывающий </p>
<svg width="108" height="108">
<circle r="46" cx="54" cy="54" />
<circle style="stroke-dasharray:60% 140%" r="46" cx="54" cy="54" />
</svg>svg {
display: block;
margin: 100px auto;
width: 200px;
}
circle {
fill: rgba(0,0,0,0);
stroke: #eee;
stroke-width: 16;
}
circle:nth-child(2n) {
fill: rgba(0,0,0,0);
stroke: #30bae7;
}<figure>
<img>
<div class="social"></div>
</figure>figure {
position: relative;
}
.social {
position: absolute;
задаем нужное положение
на выбор: display:none; opacity:0 или visibility: hidden (могу быть еще варианты позиционирования куда-нибудь за край блока или экрана, но их опустим)
}
img:hover + .social {
возвращаем display, opacity или visibility
}figure: hover .social {}.