Fronteras de ancho parcial

¿Cómo puedo producir bordes que no abarquen todo el ancho de una caja determinada? Ej .:Fronteras de ancho parcial

enter image description here

¿Tengo que utilizar un elemento HTML independiente con un ancho diferente? O puedo lograr esto completamente a través de CSS.

Fuente

2011-05-21 Tom Lehman

Creo que esos elementos particulares son '' s

con su 'width' establecido. – Ryan

Correcto, mi pregunta es si puedo lograr este efecto sin agregar elementos HTML adicionales ('

's o de lo contrario) –

¿Cuáles son los requisitos/objetivos de tu navegador? – matchew

Siempre se puede utilizar un CSS: después de la declaración:

<style> 
div.hr-like:after { 
    height:1px; 
    background:#333; 
    width:25%; 
    display:block; 
    margin:0px auto; 
    content:"" 
} 
</style> 

<div class="hr-like"> 
    foo 
</div>

Agregado: He aquí un ejemplo en jsfiddle

Fuente

2011-05-21 03:04:09

Agradable. Esto funcionará en todo menos en IE6 e IE7, ¿sí? –

Sí. Aquí está la página de modo peculiar: http://www.quirksmode.org/css/beforeafter_content.html –

Se puede asignar una imagen de fondo a cada div parcial y colocarlo a lo largo del abajo en el medio. Entonces, el separador puede ser lo que quieras y por cuánto tiempo quieras, como esa línea de lápiz que tienes allí.

#content { 
    background: transparent url('http://placekitten.com/200/10') no-repeat bottom center; 
}

Lo siento por los gatitos ...

Fuente

2011-05-21 03:10:40 igneosaur

Respuesta

Cuestiones relacionadas