Когда позиция CSS (в .second :: before) установлена в относительное значение, ширина (фиксированная в пикселях) не учитывается, отображается только вертикальная линия, а ширина "принудительно устанавливается браузером" до 1 пикселя.
Псевдоэлемент является встроенным элементом по умолчанию, настройка position:relative не изменит этого, поэтому вы не можете применить ширину и высоту к элементу. Тогда граница не устанавливает ширину 1px, это установленная вами граница, равная 1px. Высота также не работает, а высота элемента и границы определяется свойством шрифта.
Увеличьте высоту, и вы увидите, что ничего не изменится:
.first {
background-color: #dc3545;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 20px;
padding: 5px 10px;
margin-top: 10px;
}
.second {
background-color: #6f42c1;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 5px;
padding: 5px 10px;
margin-top: 10px;
margin-left: 10px;
}
.second::before {
content: "";
top: -13px;
left: -30px;
border-left: 1px solid #aaa;
border-bottom: 1px solid #000;
border-radius: 0 0 0 0px;
height: 600px;
width: 50px !important;
}
<span class="first">First</span>
<span class="second">Second</span>
Теперь увеличьте font-size, и вы увидите некоторые изменения
.first {
background-color: #dc3545;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 20px;
padding: 5px 10px;
margin-top: 10px;
}
.second {
background-color: #6f42c1;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 5px;
padding: 5px 10px;
margin-top: 10px;
margin-left: 10px;
}
.second::before {
content: "";
top: -13px;
left: -30px;
border-left: 1px solid #aaa;
border-bottom: 1px solid #000;
border-radius: 0 0 0 0px;
height: 600px;
font-size:50px;
width: 50px !important;
}
<span class="first">First</span>
<span class="second">Second</span>
Когда позиция CSS (в .second :: before) установлена в абсолютное значение, ширина не учитывается, и отображается горизонтальная линия, но линия не соединяет два блока.
При добавлении position:absolute элемент становится элементом уровня блока, поэтому вы можете знать, как контролировать его ширину и высоту, и оба они рассматриваются в вашем случае, но ваш элемент позиционируется относительно области просмотра, так как нет позиционированного предка. Он скрыт, потому что вы установили отрицательное левое значение, поэтому вы не можете видеть установленную границу.
Вам нужно сделать интервал position:relative, чтобы псевдоэлемент располагался относительно пролета:
.first {
background-color: #dc3545;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 20px;
padding: 5px 10px;
margin-top: 10px;
}
.second {
background-color: #6f42c1;
color: #fff;
font-size: 1.2rem;
border: 1px #ccc solid;
border-radius: 5px;
padding: 5px 10px;
margin-top: 10px;
margin-left: 10px;
position:relative;
}
.second::before {
content: "";
position: absolute;
top: -13px;
left: -30px;
border-left: 1px solid #aaa;
border-bottom: 1px solid #000;
border-radius: 0 0 0 0px;
height: 26px;
width: 50px !important;
}
<span class="first">First</span>
<span class="second">Second</span>
10.3.1 Встроенные, незаменяемые элементы
Свойство width не применяется ref
10.6.1 Встроенные незаменяемые элементы
Свойство 'height' не применяется . Высота области содержимого должна составлять в зависимости от шрифта , ref
Floats, абсолютно позиционированные элементы , блочные контейнеры (такие как inline-блоки, ячейки таблиц и заголовки таблиц), которые не являются блочными блоками, и блочные блоки с «переполнением», отличным от «visible» '(кроме случаев, когда это значение было передано в область просмотра) устанавливает новые контексты форматирования блока для их содержимого . исх
В модели абсолютного позиционирования поле явно смещено относительно содержащего его блока
Если элемент имеет 'position: absolute', содержащий блок устанавливается ближайшим предком с «положением» «абсолютного», «относительного» или «фиксированного», ... Если такого предка нет, содержащий блоком является начальный содержащий блок . исх