Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Formato Mapa de Cursos

¿Cómo hacen para que esta lista tenga una línea a la izquierda? Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Hola Samuel

Esta lista no está confeccionada con listas ordenadas ni desordenadas (ol / ul) sino con h4

<nav class="rodapePrincipal-navMap-list">

                    <h4 class="navmap-list-title navmap-list-title-backend">Lenguajes Backend</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Java</a>
                    <a class="rodapePrincipal-navMap-link" href="#">PHP</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Pascal</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Scala</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Python</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Java Web</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Assembly</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Lógica de programación</a>

                    <h4 class="navmap-list-title navmap-list-title-frontend">Lenguajes Frontend</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Flexbox</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Desarrollo Web</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Javascript</a>
                    <a class="rodapePrincipal-navMap-link" href="#">AngularJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">ReactJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Polymer</a>

                    <h4 class="navmap-list-title navmap-list-title-framework">Frameworks</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">Ruby on Rails</a>
                    <a class="rodapePrincipal-navMap-link" href="#">VRaptor</a>
                    <a class="rodapePrincipal-navMap-link" href="#">SpringMVC</a>
                    <a class="rodapePrincipal-navMap-link" href="#">NodeJS</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Django</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Bootstrap3</a>

                    <h4 class="navmap-list-title navmap-list-title-bancoDeDados">Banco de datos</h4>
                    <a class="rodapePrincipal-navMap-link" href="#">MySQL</a>
                    <a class="rodapePrincipal-navMap-link" href="#">MariaDB</a>
                    <a class="rodapePrincipal-navMap-link" href="#">Postegres</a>

                </nav>

lo que se ha realizado es agregarle un border-left de 4px a cada uno de ellos:

.navmap-list-title-bancoDeDados { color: #EC6E5A; border-left: 4px solid #EC6E5A; }
.navmap-list-title-framework { color: #AD85BF; border-left: 4px solid #AD85BF; }
.navmap-list-title-frontend { color: #5EC6F3; border-left: 4px solid #5EC6F3; }
.navmap-list-title-backend { color: #25D285; border-left: 4px solid #25D285; }

Saludos