There is html:

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

There is scss:

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

It is necessary to do what would be under li a red stripe with the help of before . I tried to make a border-bottom , but I just need ::before , ::after .

thank

  • Why such requirements? Both pseudo-elements support browsers worse than just border-bottom . - user200141
  • @ Oleg Degtev, where does such information about support come from? - Roman Grinyov
  • Well here you need, please tell me - Nikita Shchypylov
  • one
    and you have exactly css? he doesn't support the nested description of selectors - Grundy
  • @ w3lifer: In my practice, it is still very often written TK, which require support from IE7. If you are different, then I envy you =) - user200141

1 answer 1

Here is the SCSS:

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

Example

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

  • the code provided in this way is not css, it’s unlikely to work directly in the browser - Grundy
  • @Grundy corrected - Vasily Barbashev
  • Is it possible without a border? For example, height and width? - Nikita Shchypylov
  • @ Nikita Schipilov corrected example - Vasily Barbashev
  • one
    @ w3lifer is a SCSS, handy thing, habrahabr.ru/post/140612 . Parsing later in CSS, constructions turn out to be more comfortable and pleasing to the eye, + you can use calculation and variables - Vasily Barbashev