1

Почему то не срабатывает before и after в css вот пример тут http://jsfiddle.net/aUbVC/

.beforeAndAfter {
    width:100px;
    height:100px;
    background:#ff9999;
    margin:50px;
}
.beforeAndAfter::before {
    content:"";
    bottom:100%;
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(100, 0, 0, 0) 80%);
}
.beforeAndAfter::after {
    content:"";
    top: 100%;
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.beforeAndAfter:before, .beforeAndAfter:after {
    pointer-events: none;
    position: absolute;
    content:'';
    left: 0;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    height: 5px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
<div class="beforeAndAfter"></div>

3
  • 3
    что значит не срабатывает ? у вас opacity 0; строка before немного вверх заезжает, а after- вниз...
    – zb'
    Commented 27 февр. 2014 в 23:23
  • 1
    так хотелось ?
    – zb'
    Commented 27 февр. 2014 в 23:28
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 30 сент. 2015 в 16:00

2 ответа 2

2

Забыли вставить display:inline-block;

.beforeAndAfter {
    width:100px;
    height:100px;
    background:#ff9999;
    margin:50px;
}
.beforeAndAfter::before {
    content:"";
    bottom:100%;
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(100, 0, 0, 0) 80%);
}
.beforeAndAfter::after {
    content:"";
    top: 100%;
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.beforeAndAfter:before, .beforeAndAfter:after {
    display:inline-block;
    pointer-events: none;
    position: absolute;
    content:'';
    left: 0;
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
    height: 5px;
    opacity: 0;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}
<div class="beforeAndAfter"></div>

0

Лучше поздно, чем никогда =)

.beforeAndAfter {
    width:100px;
    height:100px;
    background:#ff9999;
    margin:50px;
    /* добавить */
    position: relative;
}
.beforeAndAfter:before, .beforeAndAfter:after{
    /* Убрать */
    opacity: 0;
}

http://jsfiddle.net/aUbVC/3/

Ваш ответ

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

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