Убрать выделение у элемента :before при наведении курсора

Question

При наведении курсора текст подчеркивается.

Как сделать, чтобы после выполнения медиа-запроса при наведении на элемент cell он подчеркивался без .cell::before?

.cell {

    display: table-cell;
    text-align: center;
    border: 1px solid #ccc;
    vertical-align: middle;
}

.cell:hover { text-decoration: underline; }

@media screen and (max-width: 700px) {

  .cell::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  
  .cell {
    display: block;
    border: 1px solid #ccc;
    margin: 0;
  }
}

<div class="table">

  <div class="th">
    <div class="cell">Заголовок 1</div>
    <div class="cell">Заголовок 2</div>
    <div class="cell">Заголовок 3</div>
    <div class="cell">Заголовок 4</div>
    <div class="cell">Заголовок 5</div>
  </div>
  
  <div class="td">
    <div class="cell" data-label="Заголовок 1">Dанные 1</div>
    <div class="cell" data-label="Заголовок 2">Данные 2</div>
    <div class="cell" data-label="Заголовок 3">Данные 3</div>
    <div class="cell" data-label="Заголовок 4">Данные 4</div>
    <div class="cell" data-label="Заголовок 5">Данные 5</div>
  </div>
</div>

Answer 1

Без дополнительной модификации разметки селективно отключить поведение для псевдоэлемента не представляется возможным, поскольку Вы пытаетесь взаимодействовать с тем же самым свойством (text-decoration).

Один из вариантов как это можно реализовать:

.cell {
  display: table-cell;
  text-align: center;
  border: 1px solid #ccc;
  vertical-align: middle;
}

.cell:hover {
  text-decoration: underline;
}

@media screen and (max-width: 700px) {
  .cell::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .cell {
    display: block;
    border: 1px solid #ccc;
    margin: 0;
  }
  .cell:hover {
    text-decoration: unset;
  }
  .cell > span:hover {
    text-decoration: underline;
  }
}

<div class="table">
  <div class="th">
    <div class="cell"><span>Заголовок 1</span></div>
    <div class="cell"><span>Заголовок 2</span></div>
    <div class="cell"><span>Заголовок 3</span></div>
    <div class="cell"><span>Заголовок 4</span></div>
    <div class="cell"><span>Заголовок 5</span></div>
  </div>
  <div class="td">
    <div class="cell" data-label="Заголовок 1"><span>Данные 1</span></div>
    <div class="cell" data-label="Заголовок 2"><span>Данные 2</span></div>
    <div class="cell" data-label="Заголовок 3"><span>Данные 3</span></div>
    <div class="cell" data-label="Заголовок 4"><span>Данные 4</span></div>
    <div class="cell" data-label="Заголовок 5"><span>Данные 5</span></div>
  </div>
</div>

БЛОГ НА HUSL

Убрать выделение у элемента :before при наведении курсора

Ответы (1 шт):