:after dla ul w pojedynczych li

Question

Witam Wszystkich,

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

Comments

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

---

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?

Answer 1

MDN wytłumaczy : ) W Twoim przypadku wartość content: ''; będzie pustym stringiem

Answer 2

Czy byłby ktoś w stanie pomoc?

Comments

Live code + dokładny opis to podstawa by ktoś mógł ci pomóc.

---

<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:after {
    content: '';
    border-bottom: 3px dotted #a1a1a1;
    padding: 10px;
}

 

---

to menu masz pionowe i chcesz, żeby poszczególne elementy listy były oddzielone jakąś linią, tak? czy ja źle zrozumiałam?

---

nie musisz używać aftera by dodać dolny border dla li.

---

Chce dać dolny border dla 3 elementów menu 

---

Co ew. mogłbym użyć? Próbowałem z <hr>, ale mam błąd przy walidacji

---

no to w czym problem? nadajesz tym elementom dodatkową klasę i ją stylujesz.

---

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

---

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;
}

 

---

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 ;)

---

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 

 

Dziękuje! 

---

to fajnie ;) proszę :P