Верстаю соц.сеть. В блоке на скрине есть полоска ниже "Your page". По макету она должна быть на всю ширину блока:
Пробовал сделать эту полоску в виде border, но так как задал паддинг всему блоку, то границе не на всю ширину. Решил делать через псевдоэлемент. Но то эта полоска на всю ширину страницы, то она уезжает за границы блока, то не на ширину блока.
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
background: #e5e5e5;
}
.fanpage {
background: #ffffff;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px;
margin-top: 16px;
padding: 10px 16px 16px 16px;
margin-left: 24px;
}
.fanpage-header {
display: flex;
justify-content: space-between;
/* border-bottom: 1px solid black; */
}
.fanpage-item {
display: flex;
align-items: center;
text-decoration: none;
}
.fanpage-item-stats {
margin-left: 12px;
}
.fanpage-image {
width: 48px;
height: 48px;
}
.fanpage-title {
font-size: 14px;
line-height: 22px;
color: #595959;
margin: 0;
margin-bottom: 16px;
}
.fanpage-item-title {
font-weight: 600;
font-size: 14px;
line-height: 22px;
color: #0050b3;
display: block;
}
.fanpage-messages {
display: flex;
align-items: center;
justify-content: center;
}
.fanpage-notifications {
display: flex;
align-items: center;
margin-left: 60px;
margin-top: -7px;
width: 100%;
word-wrap: break-word;
margin-bottom: 23px;
}
.fanpage-button-icon {
margin-right: 4px;
}
.fanpage-messages-count,
.fanpage-notifications-count {
font-weight: normal;
font-size: 14px;
line-height: 22px;
color: #8c8c8c;
}
.fanpage-count-icon {
background: #f5f5f5;
border: 1px solid #d9d9d9;
border-radius: 4px;
margin-left: 4px;
}
.fanpage-stats {
margin-bottom: 16px;
}
.fanpage-stats::before {
position: absolute;
left: 0;
content: "";
width: 100%;
height: 1px;
background-color: #e8e8e8;
margin-bottom: 16px;
display: inline-block;
}
.fanpage-buttons-group {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-bottom: 16px;
}
.fanpage-buttons-group::before {
content: "";
width: 100%;
height: 1px;
background-color: #e8e8e8;
margin-bottom: 16px;
}
.fanpage-button-active {
font-size: 16px;
font-weight: normal;
line-height: 24px;
color: #1890ff;
background: #ffffff;
border: 1px solid #1890ff;
height: 40px;
}
.fanpage-button {
background: #ffffff;
font-weight: normal;
border: 1px solid #d9d9d9;
font-size: 16px;
line-height: 24px;
height: 40px;
}
.fanpage-button,
.fanpage-button-active {
flex-grow: 1;
justify-content: center;
}
.fanpage-count-active {
font-weight: normal;
font-size: 24px;
line-height: 32px;
color: #262626;
display: flex;
justify-content: center;
margin: 0;
margin-bottom: 4px;
}
.fanpage-all-active {
font-size: 14px;
font-weight: normal;
line-height: 22px;
color: #8c8c8c;
display: flex;
justify-content: center;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
/* visibility: hidden; */
width: 63px;
height: 32px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 4px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 15px;
margin-left: -45px;
}
.tooltiptext {
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #FFFFFF;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.post-header-button:hover .tooltiptext {
visibility: visible;
}
<div class="fanpage">
<div class="fanpage-header">
<h4 class="fanpage-title">Your page</h4>
<div class="funpage-dots">
<button class="post-header-button">
<svg width="24" height="24" class="post-button-icon">
<use xlink:href="img/icons.svg#dots"></use>
</svg>
<div class="tooltip">
<span class="tooltiptext">Options</span>
</div>
</button>
</div>
</div>
<div class="fanpage-stats">
<a href="#" class="fanpage-item">
<div class="fanpage-item-image">
<img src="/img/fanpage.jpg" alt="fanpage" class="fanpage-image">
</div>
<div class="fanpage-item-stats">
<span class="fanpage-item-title">Concuria</span>
<div class="fanpage-messages">
<svg width="16" height="16" class="fanpage-button-icon">
<use xlink:href="img/icons.svg#comment"></use>
</svg>
<span class="fanpage-messages-count">Messages</span>
</div>
</div>
</a>
<div class="fanpage-notifications">
<svg width="16" height="16" class="fanpage-button-icon">
<use xlink:href="img/icons.svg#bell"></use>
</svg>
<span class="fanpage-notifications-count">Notifications</span>
<svg width="17" height="22" class="fanpage-count-icon">
<use xlink:href="img/icons.svg#count-fanpage"></use>
</svg>
</div>
</div>
<div class="fanpage-buttons-group">
<button class="fanpage-button-active">Likes</button>
<button class="fanpage-button">Views</button>
<button class="fanpage-button">Posts</button>
</div>
<div class="fanpage-likes">
<h2 class="fanpage-count-active">262</h2>
<h4 class="fanpage-all-active">5 likes this week</h4>
</div>
</div>