text-decoration underline исключив псевдоэлемент?

136
09 декабря 2018, 22:20

Как сделать так, чтобы нижнее подчеркивание не касалось псевдоэлемента? То есть чтобы не подчеркивался символ "/" ?

.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>
Answer 1

Я адепт БЭМ, поэтому сделал бы как-нибудь так:

.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>

Answer 2

Всё просто. 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>

READ ALSO
Всплывающий блок

Всплывающий блок

На странице есть кнопка, как сделать так, чтобы при клике на кнопку, всплывал блок div? Спасибо

176
Скрывать блок при клике вне него [дубликат]

Скрывать блок при клике вне него [дубликат]

На данный вопрос уже ответили:

180
Создание списка с колонками

Создание списка с колонками

Появилась нужда сделать список с колонками, чтобы их размер можно было регулироватьТакие списки используются везде, но оказалось что, не все...

176