0

Есть html:

<li class="upload f_left">
    <a href="#">Upload</a>
</li>

Есть scss:

.upload {
    //background: #dd2425;
    .border-radius(6px);
    width: auto;
    a {
        color: #333333;
        padding: 8px 13px;
        display: block;
        text-align:center;
    }
}

Нужно сделать, что бы под li была красная полоска с помощью before. Пробовал сделать border-bottom, но вот нужно именно ::before, ::after.

Спасибо

5
  • А зачем такие требования? У обоих псевдоэлементов поддержка браузерами хуже, чем просто border-bottom.
    – user200141
    Commented 29 мар. 2016 в 12:56
  • @ОлегДёгтев, откуда такие сведения про поддержку? Commented 29 мар. 2016 в 12:59
  • Ну вот нужно, подскажите пожалуйста Commented 29 мар. 2016 в 13:00
  • 1
    а у вас точно css? он же не поддерживает вложенное описание селекторов
    – Grundy
    Commented 29 мар. 2016 в 13:05
  • @w3lifer: В моей практике все еще очень часто пишутся ТЗ, в которых требуется поддержка от ИЕ7. Если у вас иначе, то я вам завидую =)
    – user200141
    Commented 29 мар. 2016 в 15:31

1 ответ 1

3

Вот SCSS:

 a {
    color: #333333;
    padding: 8px 13px;
    display: block;
    text-align:center;
    text-decoration: none;
    &:after {
      content: '';
      display: block;
      height: 1px;
      background: green;
    }
  }

Пример

http://codepen.io/bustexz/pen/BKdjOL

9
  • так-то предоставленный код не css, напрямую в браузере вряд ли заработает
    – Grundy
    Commented 29 мар. 2016 в 13:02
  • @Grundy поправил Commented 29 мар. 2016 в 13:03
  • а без бордера возможно?например, высота и ширина? Commented 29 мар. 2016 в 13:03
  • @НикитаЩипилов поправил пример Commented 29 мар. 2016 в 13:04
  • 1
    @w3lifer это SCSS, удобная вещь, habrahabr.ru/post/140612 . Парсится потом в CSS, конструкции получаются более удобными и приятными глазу, + можно использовать калькуляцию и переменные Commented 29 мар. 2016 в 13:08

Ваш ответ

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

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