BG Development


  Reply to this topicStart new topicStart Poll

> Иконки с after CSS selector
Sta82
Публикувано на: 04-11-2018, 14:56
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 15
Регистриран на: 28.02.18



Здравейте. Много моля за помощ! Трябва да направя така, че с after селектора да заредя четири снимки-иконки по местата им. Направил съм го със span в html и ntd child в CSS, но ми казаха, че е по-добре иконките да са after-и на li-тата. Ето как понастоящем изглежда HTML и CSS кодът:

<div id="blue_services" class="padd">
<h3 class="h3">SERVICES</h3>
<ul class="clearfix">
<li>
<span></span>
<h4><a href="#">COFFEE</a></h4>
<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
</li>
<li>
<span></span>
<h4><a href="#">INSTANT</a></h4>
<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
</li>
<li>
<span></span>
<h4><a href="#">SERIOUS</a></h4>
<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
</li>
<li>
<span></span>
<h4><a href="#">FRAME</a></h4>
<p>Apple pie icing sweet. Brownie jelly-o applicake applicake sweet roll liquorice bear claw. Jujubes carrot cake cotton candy sweet tart brownie. Tiramisu applicake jujubes.</p>
</li>
</ul>
</div>
----------------------------------------------------------------------------------------------------------------

#blue_services ul li:nth-child(2) span {
background-image: url('../images/instant_icon.png');
}
#blue_services ul li:nth-child(3) span {
background-image: url('../images/serious_icon.png');
}
#blue_services ul li:nth-child(4) span {
background-image: url('../images/frame_icon.png');
}
#blue_services ul li span {
height: 50px;
width: 50px;
display: inline-block;
background-image: url('../images/coffee_icon.png');
background-repeat: no-repeat;
}
PMEmail Poster
Top
batzidi
Публикувано на: 04-11-2018, 17:05
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 32
Регистриран на: 12.10.11



Ето тук има доста материал с обяснения - https://freefrontend.com/css-before-after/
PMEmail Poster
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2018 | BG Development | All Rights Reserved
RSS 2.0