:after dla ul w pojedynczych li

pytanie zadane 14 stycznia 2017 w HTML i CSS przez Daniel Kudyba Obywatel (1,260 p.)

Witam Wszystkich,

Nie ogarniam jak użyć :after dla kilku konkretnych wierszy w menu (docelowo pozioma linia). Ktoś wytłumaczy?

komentarz 14 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)

Dodałem class do li, w tej klasie zrobiłem granicę - działa bez after i poprawnie przeszło walidację ;)

komentarz 14 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)

Hmmm, ale znowu nie mogę dodać lewego marginesu do tego bordera .... Ktoś pomoże z tym after, lub podrzuci inny pomysł, by było poprawnie?

2 odpowiedzi

odpowiedź 14 stycznia 2017 przez niezalogowany

odpowiedź 15 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)

Czy byłby ktoś w stanie pomoc?

Pokaż 7 poprzednich komentarzy

komentarz 15 stycznia 2017 przez imklau Nałogowiec (42,090 p.)

to oznacz te elementy class i daj im border-bottom odpowiedni, tak chyba najprościej

komentarz 15 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)

tak, ale jak oznaczam class dla li, to border jest od początku li,a chce by zaczynał się od pierwszej litery napisu. Po dodaniu margin-left - przesuwa mi całe wyrażenie, łacznie z opcją menu, chyba że coś źle robię?

<ul class="side-menu">
												
																	<li class="border"><a href="#" title="Menu">Menu</a></li>
																	
																	<li><a href="#" title="Bieżace informacje"> Aktualności</a></li>
																	<li><a href="#" title="Branże"> Branże</a></li>
																	<li><a href="#" title="Nasze produkty"> Produkty</a></li>
																	<li><a href="#" title="Usługi"> Usługi</a></li>
																	<li><a href="#" title="Referencje"> Referencje</a></li>
																	<li><a href="#" title="Kontakt  z Nami">Kontakt</a></li>
																	<li><a href="#" title="Informacje o firmie"> O firmie</a></li>
																	<li><a href="#" title="Branże"> Nagrody</a></li>
																	<li><a href="#" title="Relacje inwestorskie"> Relacje <span class="li.a"> inwestorskie</span> </a></li>
																	<li><a href="#" title="Partnerzy"> Partnerzy</a></li>
																	<li><a href="#" title="Kariera"> Kariera</a></li>
																	
																	
													</ul>

.border{
   
    border-bottom: 3px dotted #a1a1a1;
    margin-bottom: 20px;
	margin-left: 20px;
}

komentarz 15 stycznia 2017 przez imklau Nałogowiec (42,090 p.)

U mnie przy takim zapisie wyświetla się od początku napisu

li {
	width: 100px;
	display: block;
	border-bottom: 1px dotted black;
   }

Jak coś to nie dodawaj paddingu z lewej strony, bo to on powoduje przesunięcie ;)

komentarz 15 stycznia 2017 przez Daniel Kudyba Obywatel (1,260 p.)

Zadziałało dopiero po tym jak zbadałem element i zobaczyłem, ze do side-menu li dodany jest padding-left: 20px; <--- a miliony razy robiłem tą classe dla pojedynczego <li> i nie wychodziło przez tp