html - tag - rumbo con línea horizontal a cada lado
line tag (3)
Esto podría funcionar:
.floatClear {
clear: both;
}
#wrapper {
text-align: center;
position: relative;
}
#wrapper .line {
border-bottom: 2px solid red;
position: absolute;
width: 100%;
top: 15px;
}
#wrapper .textbox {
position: absolute;
width: 100%;
}
#wrapper .textbox .text {
background-color: white;
margin: 0px auto;
padding: 0px 10px;
text-align: center;
display: inline;
font-size: 24px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="line"></div>
<div class="textbox">
<div class="text">This is my Title</div>
</div>
</div>
</body>
</html>
Lo que sucede aquí es que establece el texto sobre la línea del fondo y con el color de fondo más el relleno lateral para que oculte la línea detrás del bloque de texto.
Esta pregunta ya tiene una respuesta aquí:
Estoy trabajando en algunos CSS donde el diseño exige que los títulos de las páginas (encabezados) se centren con líneas horizontales que se centren verticalmente en ambos lados. Además, hay una imagen de fondo en la página, por lo que el fondo del título debe ser transparente.
He centrado el título y puedo usar pseudo clase para crear la línea. Pero necesito que la línea desaparezca cuando cruce el texto del título.
Consideré usar un degradado de fondo que sea transparente donde están las palabras, pero como cada título podría tener una longitud diferente, no sabría dónde poner las paradas.
Aquí está el CSS hasta ahora:
h1 {
text-align: center;
position: relative;
font-size: 30px;
z-index: 1;
}
h1:after {
content: '''';
background-color: red;
height: 1px;
display: block;
position: absolute;
top: 18px;
left: 0;
width: 100%;
}
Aquí es donde estoy en: http://jsfiddle.net/XWVxk/1/
¿Se puede hacer esto con CSS sin agregar ningún HTML extra?
Mira esta http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition , aquí está tu respuesta.
Aquí está su código original modificado
h1 {
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
h1:before, h1:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: ''/a0'';
background-color: red;
}
h1:before {
margin-left: -50%;
text-align: right;
}
.color {
background-color: #ccc;
}
<h1>This is my Title</h1>
<h1>Another Similar Title</h1>
<div class="color"><h1>Just Title</h1></div>
Nota: el artículo ya no está en línea, aquí está la última buena versión archivada: http://web.archive.org/web/20140213165403/http://blog.goetter.fr/post/36084887039/tes-pas-cap-premiere-edition
Necesitaba esto hace unos días, pero la respuesta aceptada no funciona en IE.
esto es lo que se me ocurrió: funciona en todos los navegadores principales (> = ie8)
jsfiddle: http://jsfiddle.net/gKve7/
HTML:
<h2 class="decorated"><span>My Title</span></h2>
CSS:
/* headlines with lines */
.decorated{
overflow: hidden;
text-align: center;
}
.decorated > span{
position: relative;
display: inline-block;
}
.decorated > span:before, .decorated > span:after{
content: '''';
position: absolute;
top: 50%;
border-bottom: 2px solid;
width: 592px; /* half of limiter */
margin: 0 20px;
}
.decorated > span:before{
right: 100%;
}
.decorated > span:after{
left: 100%;
}