Блог

Главная - Вопросы по программированию - Перед третьим элементом добавьте изображение, используя :перед

Перед третьим элементом добавьте изображение, используя :перед

#html #css

Вопрос:

Я хочу добавить изображение, используя перед elemt, только в третий li. Я хочу скрыть AWS Marketplace и добавить туда изображение. К этому промежутку уже добавляю после занятия , используя перед тем, как я хочу добавить изображение

  <ul class="vc_tta-tabs-list">
    <li class="vc_tta-tab" data-vc-tab=""><a href="#1558949632107-3ba56c03-250e" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Case Studies</span></a></li>
    <li class="vc_tta-tab" data-vc-tab=""><a href="#1558949632107-3ba56c03-250d" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">Blogs</span></a></li>
    <li class="vc_tta-tab vc_active" data-vc-tab=""><a href="#1615875372006-f9d0c991-1ae6" data-vc-tabs="" data-vc-container=".vc_tta"><span class="vc_tta-title-text">AWS Marketplace</span></a></li>
    </ul>

Я использую приведенный ниже код, но изображение не отображается, только третий интервал li только скрыт

 #header_bar .vc_tta-tabs .vc_tta-tab:nth-child(3)>a span{
    display:none;
}
#header_bar .vc_tta-tabs .vc_tta-tab:nth-child(3)>a span:before{
/*     content:"vbvbvvbbvbvbnbnbnbnbnbnbnnnnnnnnnnnnnnnnnnnnnn"; */
content: url(abc.com11/2-dev/wp-content/uploads/2021/03/15190223/abc.png);

}

Комментарии:

1. Вы не сможете отобразить ::before псевдоэлемент, если скроете сам элемент с помощью display: none . Эти псевдоэлементы ведут себя так, как если бы они были фактическим дочерним узлом, вставленным в элемент.

2. Скройте промежуток и, может быть, вместо этого примените псевдоэлемент к его родителю a ?

Ответ №1:

Вместо display:none этого вы можете сделать текст прозрачным в элементе списка. Попробуй:

 #header_bar .vc_tta-tabs .vc_tta-tab:nth-child(3)>a span{
    color:transparent;
}
Метки: ,