Как спрятать псевдоэлементы before и after на медиазапрсах?

253

01 апреля 2018, 18:15

Здравствуйте, подскажите пожалуйста, как спрятать псевдоэлементы на медиазапросах? и почему display: none; не срабатывает?

Мой код

.aside-title{
color: #DC3545;
font-size: 20px;
text-align: center;
margin-bottom: 30px;
overflow: hidden;
}
.aside-title:before,
.aside-title:after{
content: '';
display: inline-block;
background:  #DC3545;
border: solid #fff;
border-width: 0 10px;
vertical-align: middle;
box-sizing: border-box;
width: 150px;
height: 1px;
}
.aside-title:before{
margin-left: -100px;
}
.aside-title:after{
margin-right: -100px;
}

Answer 1

Я показал свою версию , на списках , где при экране меньше 768px пропадут маркеры .. смотрите сниппет сначала просто посмотреть а потом во весь экран но не забываем о мета теге :

Достаточно обычно в content:""; ни чего не указывать и можно дополнительно добавить display:none;

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

* { 
  margin: 0; 
  padding: 0; 
} 
 
ul { 
  list-style: none; 
  display: flex; 
} 
 
li { 
  margin-left: 10px; 
  position: relative; 
  border: 1px solid red; 
  padding: 0 10px 0 30px; 
} 
 
li:before { 
  content: "✏"; 
  position: absolute; 
  left: 10px; 
  top: 50%; 
  transform: translate(0, -50%); 
} 
 
@media (max-width:768px) { 
  li:before { 
    content: ""; 
  } 
  li { 
    padding: 0 5px; 
    background: #fbfbfb; 
    border: none; 
  } 
}

<ul> 
  <li> 
    <p>lorem41</p> 
  </li> 
  <li> 
    <p>lorem42</p> 
  </li> 
  <li> 
    <p>lorem43</p> 
  </li> 
  <li> 
    <p>lorem44</p> 
  </li> 
  <li> 
    <p>lorem458900</p> 
  </li> 
</ul>