Как сделать так, чтобы нижнее подчеркивание не касалось псевдоэлемента? То есть чтобы не подчеркивался символ "/" ?
.uploader span{
cursor: pointer;
}
.uploader span:before{
content: ' / '
}
.uploader span:hover{
text-decoration: underline;
}
<div class="uploader">
<span>Папка 0</span>
<span>Папка 1</span>
<span>Папка 2</span>
</div>
Я адепт БЭМ, поэтому сделал бы как-нибудь так:
.uploader__item{
cursor: pointer;
display: inline-block;
}
.uploader__item:hover .uploader__folder {
text-decoration: underline;
}
.uploader__item:before{
content: ' / '
}
<div class="uploader">
<div class="uploader__item">
<span class="uploader__folder">Папка 0</span>
</div>
<div class="uploader__item">
<span class="uploader__folder">Папка 1</span>
</div>
<div class="uploader__item">
<span class="uploader__folder">Папка 2</span>
</div>
</div>
Всё просто. Pure CSS.
.uploader span {
cursor: pointer;
}
.uploader span:before {
content: '';
height: 14px;
border-left: 1px solid;
display: inline-block;
transform: translate(-5px, 1px) rotate(20deg);
transform-origin: bottom left;
margin-left: 3px;
margin-right: 2px;
}
.uploader span:hover {
text-decoration: underline;
}
<div class="uploader">
<span>Папка 0</span>
<span>Папка 1</span>
<span>Папка 2</span>
</div>
На странице есть кнопка, как сделать так, чтобы при клике на кнопку, всплывал блок div? Спасибо
Появилась нужда сделать список с колонками, чтобы их размер можно было регулироватьТакие списки используются везде, но оказалось что, не все...