0
130
VistasHTML H1 - Complicaciones de estilos de encabezado
div { background-color: #ccc; width: 100%; color: #ffffff; } div > div { background-color: #000; width: 80%; margin: auto; } h1::before { content: ''; display:block; height: 30px; /*height of icon */ width: 30px; /*width of icon */ border-radius: 15px; color: #fff; position: absolute; left: 5%; margin-top: 30px; /*background */ background: #ffffff no-repeat 0px 0px; } <div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>El código de ejemplo anterior usa un dentro de otro. El código real usa un diseño que está dentro de otro contenedor. Entonces, los elementos de punto y línea en la captura de pantalla están fuera de ese contenedor.
El punto se muestra actualmente con un pseudo-elemento. Puedo mostrar el círculo, pero también me gustaría crear la línea a la izquierda. El extremo izquierdo de la línea debe estirarse hasta el borde izquierdo del navegador.
Gracias
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
div { background-color: #ccc; width: 100%; color: #ffffff; } div > div { background-color: #000; width: 80%; margin: auto; } h1::before { content: ''; display:block; height: 30px; /*height of icon */ width: 30px; /*width of icon */ border-radius: 15px; color: #fff; position: absolute; left: 5%; margin-top: 30px; /*background */ background: #ffffff no-repeat 0px 0px; } h1::after { content: ''; display: block; height: 6px; width: 41px; border-radius: 15px; color: red; position: absolute; left: 0%; margin-top: 30px; background: #ffffff no-repeat 0px 0px; top: 35px; } <div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
·
Juan Pablo Isaza
Denunciar
0
Puede resolver esto agregando un pseudo-elemento :after a su elemento H1 y aplicándole algunos estilos.
He creado un ejemplo de código que podría ayudarte. También centra el punto y la línea verticalmente si el encabezado se muestra con varias líneas:
div { background-color: #ccc; width: 100%; color: #ffffff; } div>div { background-color: #000; width: 80%; margin: auto; } h1 { position: relative; } h1::before { content: ''; display: block; height: 30px; width: 30px; border-radius: 15px; color: #fff; position: absolute; left: -5%; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); background: #ffffff no-repeat 0px 0px; } h1::after { content: ''; display: block; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); left: -105%; border: 1px solid blue; width: 100%; } <div><div><h1>Für Designer, Schriftsetzer, Layouter, Grafikenthusiasten und alle anderen</h1><div><div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta