Блоки CSS до и после

Я хочу нарисовать простой карандаш, используя только CSS, и теперь столкнулся с проблемой: почему объявление селекторов до и после не работает? Я вижу только селектор перед срабатыванием.

Код того, что я получил прямо сейчас, находится здесь: http://codepen.io/machinarius/pen/vJbge< /а>


css pseudo-element
person Machinarius    schedule 11.12.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Мне кажется, что вы хотите это.

.pencil {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  background: #55A5FF;
  width: 20px;
  height: 150px;
}

.pencil:before, .pencil:after {
  width:10px;
  background: #4264E8;
  height: 150px;
  content: "";
  display: block;
  position: absolute;
}
.pencil:before {
  left: -10px;
}

.pencil:after {
  right: -10px;
}

Никогда не забывайте позиционировать свои псевдоэлементы.

Я не вижу, однако, как это необходимо. Вы достигаете того же самого с border-left и border-right.

person Bram Vanroy    schedule 11.12.2013
comment
Это попало в точку, спасибо, чувак. Примечание. Я специально не использовал границы, чтобы узнать до и после псевдоклассов. - person Machinarius; 11.12.2013

arrow_upward
0
arrow_downward

Вы можете использовать эту технику, а не использовать pesoudo clases

http://css-tricks.com/snippets/css/css-triangle/

person user3064303    schedule 11.12.2013

arrow_upward
0
arrow_downward

Вы можете сделать карандаш, как это

HTML-разметка

div class="стрелка-вверх"> /div div class="стрелка-вниз" /div

<style>
.arrow-up
{
    width:40px;
    height:150px;
    background:#000;

}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}


</style>
person user3064303    schedule 11.12.2013