Псевдо-элементы не отображаются

псевдо-элементы не отображаются на div. Я использую изображение спрайта, но я также пробовал изображение без спрайта, но ничего. Я пробовал несколько стратегий, таких как абсолютное позиционирование, использование z-индекса, полей и т. д. Кажется, я делаю это правильно, если я не ошибаюсь или, по-видимому, я делаю что-то неправильно. Я новичок в сообществе и искал здесь, а также Google еще нет результата, почему он не отображается.Код ниже в его самой основной попытке. Спасибо всем, кто нашел время помощь.

.test {
    display:inline-block;
    background:#fff;
    width:60%;
}

.test:before,
.test:after {
     background:url("/imgs/Sprite2.png") repeat-y;
}

.test:before,
.test:after {
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;
}

.test:before {
    content:"";
    background-position:0 0;
}

.test:after {
    content:"";
    background-position:-55px 0;
}

теперь у меня это работает. Код приведен ниже. Я мог бы поклясться, что уже пробовал, но, должно быть, сделал что-то не так в первый раз.

 .test {
     background:#fff;
     width:60%;margin:0  0 60px 5%;
 }

 .test:before,
 .test:after {
     content:"";
     background:url("/imgs/Sprite2.png") repeat-y;
     position:absolute;
     top:0;
     width:27px;
     height:100%;
 }

 .test:before {
     right:100%;
     background-position:0 0;
 }

 .test:after {
     left:100%;
     background-position:-55px 0;
 }
7
css pseudo-element

3 ответов

редактировать:

это вопрос height:100%; упомянутые в .test:before,.test:after

вы должны указать height:100% to .test и html и body и

см. ниже предлагаемые изменения в вашем CSS:

попробуйте это:

body, html { height: 100%; }

.test{ 
    display:inline-block; 
    background:#fff; 
    width:60%;
    height: 100%; /*added height*/
}

.test:before,
.test:after{
    content:"";
    background:url("/imgs/Sprite2.png") repeat-y;
    position:relative;
    display:inline-block;
    vertical-align:top;
    width:27px;
    height:100%;   
}

.test:before{ background-position:0 0 }
.test:after{ background-position:-55px 0 }

Рабочая Демо

5

Heres-исправленный ответ, так как я никогда не показывал, что ответил на него с помощью кнопки. Я просто поместил его в верхнюю часть, думая, что это будет считаться ответом. По сути, я, должно быть, сделал что-то не так в первый раз. Надеюсь, это поможет людям, у которых были проблемы, похожие на мины.

.test {
    background: #fff;
    width: 60%;
    margin: 0 0 60px 5%
}

.test:before, .test:after {
    content: "";
    background: url("/imgs/Sprite2.png") repeat-y;
    position: absolute;
    top: 0;
    width: 27px;
    height: 100%
}

.test:before {
    right: 100%;
    background-position: 0 0
}

.test:after {
    left: 100%;
    background-position: -55px 0
}
1

кажется, проблема заключалась в том, что ваши свойства css не были объявлены/организованы должным образом. Из того, что я видел, вы сначала заявили, что ваш фон-изображение но контент был объявлен последним с фон-позиции.

и у меня была своя проблема с шрифтом Glyphicon, который не показывался раньше, пока я не реализовал то, что keaukraine упомянул об объявлении дисплей собственность.

но иногда люди склонны забудьте объявить контент свойство, в результате которого ожидаемый результат исчезнет.

таким образом, это должно быть организовано примерно так:

element:before {
  content: "\e013"; // or content: ""
  background:url("background_image.png");
  background-position: 0 0;
  display: inline-block;
}
0