html - style - Regla/línea horizontal debajo de cada encabezado<h1> en CSS
css small line under title (6)
¿Por qué no usar simplemente el border-bottom ? También puede eliminar el lapso ..
HTML:
<h1 class="headline">Introduction</h1>
CSS:
h1 {
width:100%;
border-bottom: solid 1px #666;
}
Estoy intentando colocar una línea 100% horizontal (regla) automáticamente debajo de cada instancia de un
<h1>
etiqueta de encabezado utilizando CSS.
Ejemplo de lo que me gustaría ver:
--- recorte 8 <---
Introducción
--- recorte 8 <---
Tengo esto en mi CSS:
.mypage .headline {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
}
Y tengo esto en mi página HTML principal:
<body class="mypage">
<h1><span class="headline">Introduction</span></h1>
No puedo imaginar cómo aparece una línea horizontal debajo de cada uso de la clase de título.
Debe utilizar la propiedad CSS de border-bottom .
Para HTML, use el siguiente código:
<h1>Introduction</h1>
Para CSS, use el siguiente código:
h1
{
border-bottom:1px solid #CCC;
padding-bottom:3px;
}
En caso de que quieras usar las propiedades float:left, float:right , entonces tienes que usar la propiedad width:100% también. padding-bottom es opcionalmente dar un espacio entre el texto y la línea horizontal.
h1
{
border-bottom:1px solid #CCC;
float:left;
width:100%;
padding-bottom:3px;
}
Demostración del código: http://jsfiddle.net/aASQe/
Si sientes que algo va mal, puedes usar zoom: 1; . Ver este violín
(He eliminado el span pero puede establecer la clase en su etiqueta h1).
CSS
h1 {
font-family: Calibri, "Helvetica", san-serif;
line-height: 1.5em;
color: black;
font-size: 20px;
border-bottom: 2px solid red;
zoom: 1;
}
HTML ...
<h1>Introduction</h1>
También puedes intentar usar Pseudoclass :after. . He usado este tipo de estilo en una de mis aplicaciones.
h1:after
{
content:'' '';
display:block;
border:2px solid black;
}
Puede ordenar un poco más para diseñar algo como esto: - http://jsfiddle.net/5HQ7p/
h1:after {
content:'' '';
display:block;
border:2px solid #d0d0d0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
}
border-bottom es lo que necesita ... y para modificar la distancia de la línea desde el texto, use padding-bottom .
h1 { border-bottom: 1px solid black }
Ajustar tamaño y color a preferencia.