¿Cómo agregar algo de texto a una etiqueta hr?

Estoy tratando de tener un texto hacia el final de una etiqueta de recursos humanos y hasta ahora no he logrado que funcione como debería.

Espero tener una línea --------------------- arriba con algo de texto hacia el final.
Puedes ver mi violín aquí http://jsfiddle.net/2BHYr/

Edit:

Lo que quiero es:

__________________________Cima

preguntado el 03 de mayo de 12 a las 12:05

¿Podrías dibujar algo similar a lo que esperas? no estoy muy seguro de lo que necesita -

No entendí muy bien lo que querías, pero terminé haciendo algo. jsfiddle.net/oswaldoacauan/2BHYr/11 -

Cree una imagen de la salida adecuada (incluso en Ms paint) y publíquela aquí. No entendemos del todo lo que estás buscando. -

Solo lo hago funcionar como un elemento absolutamente posicionado, pero usando un HR-etiqueta y su título-atributo: jsfiddle.net/feeela/Cfwmz -

@feeela a pesar de que está limpio y ordenado, el pseudo-selector :after no funciona en la mayoría de las versiones vivas de IE, y no permite que el texto se convierta en un enlace. -

3 Respuestas

Creo haber entendido qué es lo que quieres. Aquí está el violín:
http://jsfiddle.net/fMJm2/2/ (Actualizado con la versión 2 también).

HTML:

<div class="separator">
    <hr>
    <a href="#top">To Top</a>

</div>

CSS:

.separator {
    margin-top: 100px;
    text-align: right;
    position: relative;
}

.separator hr {
    position: absolute;
    z-index: 1;
    width: 100%;
}

.separator a {
    position: absolute;
    right: 0px;
    top: 0px;
    font-style: italic;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
}
​

En mi código, he envuelto todo en un div con clase separator para la facilidad.

  • .separator obtiene su posición establecida en relativa para tener más control sobre los elementos secundarios.
  • hr obtiene la posición absoluta y también lo hace el enlace. Esto es para poder posicionar el <a> etiqueta encima de la <hr>.
  • El enlace está configurado para right: 0 con un poco de relleno, y termina a la derecha y encima de la <hr>. Creo que esto es lo que quieres lograr.

Versión 2:
Según la solicitud de OP, he vuelto a mezclar el código anterior para que funcione sin un <hr> etiqueta. Semánticamente tendría sentido con un <hr>, pero las circunstancias de OP no permiten su uso.

HTML:

<div class="separator_v2">
    <a href="#top">To Top</a>
</div>

CSS:

.separator_v2 {
    margin-top: 100px;
    text-align: right;
    border-top: 1px solid #000;
    overflow: visible;
}
.separator_v2 a {
    margin-top: -12px;
    display: block;
    font-style: italic;
    background: #fff;
    z-index: 10;
    padding: 2px 20px;
    float: right;
}​

El uso del margen negativo es lo que hace que esto funcione. A pesar de la creencia popular, el margen negativo es no un truco, es compatible con W3C.

contestado el 04 de mayo de 12 a las 18:05

¿Cuál es la diferencia entre su solución y la mía? - Oswaldo Acauán

Oswaldo, el violín en jsfiddle.net/oswaldoacauan/2BHYr/11, ¿Quiere decir? Mira los resultados. Claramente son radicalmente diferentes. El mío en realidad usa un etiqueta y produce el resultado correcto. - Athoxx

También he actualizado mi idea original. Puedes verla aquí. jsfiddle.net/2BHYr/17 - Gandalf

Mira este violín:

http://jsfiddle.net/53vD8/2/

Da una línea de recursos humanos seguida de un enlace.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <div class="layer">
        <div class="line simple"></div>
        <a href="#" class="top_a">Top</a>
    </div>
    <div class="layer">
        <div class="line simple"></div>
        <a href="#" class="top_a">Top</a>
    </div>
</body>

CO

.layer
{
    margin-top:10px;
    margin-bottom:10px;
}

.line.simple
{
    width:90%; 
    height:0px; 
    display:block;
    position:relative;
    border-style:solid; 
    border-width:1px 0 0 0; 
    float:left;
    margin:15px 0 0px; 
}

.top_a
{ 
    padding-left:5px; 
    font:italic 12px/18px Georgia, sans-serif;
}

contestado el 03 de mayo de 12 a las 13:05

OP pidió un sin embargo, ¿esta solución se etiqueta como la que la resolvió? Gracioso... - Athoxx

@Patrik, estoy trabajando dentro de un marco (arranque de Twitter) y si pongo las cosas se están poniendo un poco peludas. - Gandalf

username002, en ese caso, siempre puede sustituir por un lapso o algo así. Actualizaré mi respuesta y el violín con esa versión también. - Athoxx

¿Por qué necesita una etiqueta de recursos humanos para esto? Intente esto en su lugar: coloque el texto en un DIV con un ancho del 100 %, establezca el borde superior o inferior en 1 sólido y alinee el texto a la derecha.

.hr-div {
  width: 100%;
  text-align: right;
  border-style: solid;
  border: 0px 0 1 0
}

<div class="hr-div">Top</div>

contestado el 03 de mayo de 12 a las 12:05

Esto no cambiaría lo que ya se ha logrado. Tengo entendido que la palabra 'superior' debe estar alineada verticalmente con el hr, no encima o debajo de él. - cchana

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.