Столкнулся со следующей проблемой при подчеркивании заголовков у блоков. Есть навбар, в нем блоки, в каждом блоке есть два элемента - название блока и, справа от него, кнопка развернуть, при нажатии на которую появляются дочерние элементы. Проблема в том, что линия, которая подчеркивает заголовки почему-то под разными заголовками получается разной высоты. Вот Js, который генерирует html для каждого блока навбара:
let screenItem =
'<div class="col-md-4 col-lg-3 gs-nav-item" data-type="ScreenMenuItem" data-name="' + screen["Name"] + '">' +
'<div class="gs-nav-link row">' +
'<div class="col">' +
'<p>' + screen["Header"] + '</p>' +
'<div></div>' +
'</div>' +
'<div class="expand-items col-auto">' +
'<span class="icon-stack expand-icon"></span>' +
'</div>' +
'</div>' +
'</div>';
Все эти элементы лежат в блоке:
<div class="gs-nav-area" style="display: block;"><div class="row gs-nav-area-body"></div></div>
Вот стили для навбара
.gs-nav-area {
position: fixed;
top: 55px;
height: 500px;
display: none;
z-index: 5000;
overflow-y: auto;
overflow-x: hidden;
background-color: #EEEEEE;
opacity: 1;
box-shadow: 0px 8px 14px rgba(149, 155, 161, 0.2), 0px 0px 2px rgba(149, 155, 161, 0.6);
.divider-mr-md {
background-color: black;
}
.gs-nav-area-header {
width: 100%;
margin: 0;
p {
width: 100%;
margin: 0;
}
}
.gs-nav-area-body {
width: 100%;
margin-left: 0%;
.gs-nav-item {
color: black;
}
.gs-nav-item, .gs-nav-item-static {
position: relative;
height: 100px;
text-align: center;
user-select: none;
.gs-nav-link, .gs-nav-link-short {
height: 100%;
> .col, .col-auto {
align-self: center;
> p {
position: relative;
margin: 0;
font-family: IBM Plex Sans;
font-size: 19px;
}
> div {
width: 95%;
height: 2px;
margin-left: 2.5%;
background-color: black;
}
}
}
.gs-nav-link-short {
max-width: 80%;
margin-left: 10%;
margin-right: 10%;
}
}
.gs-nav-item {
.gs-nav-link > .col:hover, .gs-nav-link-short > .col:hover {
> p:first-child {
color: #008C95;
cursor: pointer
}
> div {
background-color: #008C95
}
}
}
.gs-nav-item-static {
.gs-nav-link > .col, .gs-nav-link-short > .col {
> p:first-child {
color: #008C95;
cursor: pointer
}
> div {
background-color: #008C95
}
}
}
}
.gs-nav-area-header, .gs-nav-area-body {
.expand-items {
cursor: pointer;
width: 80px;
height: 80px;
> .expand-icon {
position: absolute;
font-size: 21px;
top: 29.5px;
right: 29.5px;
}
}
.hide-items {
cursor: pointer;
width: 60px;
height: 60px;
> .hide-icon {
position: absolute;
font-size: 21px;
top: 19.5px;
right: 19.5px;
}
}
.expand-items, .hide-items {
cursor: pointer;
> .expand-icon, .hide-icon {
position: absolute;
font-size: 21px;
}
}
.expand-items:hover, .hide-items:hover {
color: #008C95
}
}
}
Подскажите, пожалуйста, в чем может быть проблема
<P>
для линий, почему не использовать, например, псевдоэлементafter
у контейнера, или вообщеborder
.