0

Здравствуйте, подскажите пожалуйста, как спрятать псевдоэлементы на медиазапросах? и почему 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;
}
1
  • Что значит не срабатывает? У вас его нет.
    – Telion
    Commented 31 мар. 2018 в 7:37

1 ответ 1

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>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.