Forma correcta de colocar: antes de los pseudo-elementos

¿Cuál es la forma correcta de colocar los pseudo-elementos :before y :after, como las imágenes? He estado jugando de varias maneras diferentes, pero ninguna parece ser una solución muy elegante.Forma correcta de colocar: antes de los pseudo-elementos

Esto es lo que estoy tratando de hacer:

enter image description here

Esto es lo que hice:

div.read-more a:before { 
    content: url('/images/read_more_arrow_sm.png'); 
    position: absolute; 
    top: 4px; 
    left: -15px; 
} 

<div class="read-more"> 
    <a href="#">Read More</a> 
</div>

que, básicamente, sólo quieren que la imagen que se alinea con el texto. ¿Hay alguna otra forma de hacer eso?

Sería ideal si pudiera utilizar el relleno y los márgenes en la imagen del :before, y que es supone que lo que haces. Pero por alguna razón, eso no me ha funcionado. Puedo agregar relleno horizontal y márgenes, pero el relleno superior e inferior no hace nada. ¿Por qué sucedería eso?

Fuente

2011-10-24 Syren

por qué no dar el 'una 'la imagen de fondo y agregar un poco de relleno izquierdo en su lugar? – BoltClock

A menos que tenga docenas/cientos de estas por página, creo que sería mejor que se olvidara del pseudo elemento y en su lugar solo coloque la imagen y el enlace uno al lado del otro. –

¿El texto en su ejemplo es "Ver video" y el contenido "anterior" a la flecha? ¿Por qué no usar una imagen de fondo? Por favor, publique su marcado HTML. –

Trate de usar background en lugar de content y poner un marcador de posición en content: http://jsfiddle.net/7X7x2/1/

Fuente

2011-10-24 19:31:17

Esto funcionó perfectamente. ¡Gracias! – Syren

Si desea que la imagen posición única a cerca del texto, entonces es probable que tenga la propiedad vertical, -align:

div.read-more a:before { 
    vertical-align: bottom; 
    content: url(image.png); 
}

Se tiene los siguientes valores posibles: línea de base, secundario, super, superior, texto arriba, medio, inferior, inferior del texto

Este valores a calculados a partir de la posición del texto de la línea de texto actual (lea más en el ejemplo).

referencia completa: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

(Para añadir espacio antes de texto sólo tiene que utilizar margin-right)

Fuente

2011-10-24 20:02:40

¿Funciona con elementos anteriores? – zardilior

Parece totalmente ineficaz para: antes,: después de los elementos (Chrome 59). No estoy seguro de por qué esta respuesta tiene rep. ya que es obvio que es poco probable que funcione para este contexto particular – Smithfield

@Smithfield funciona bien para mí: https://jsfiddle.net/p8y6fv8h/ ¿Puedes decir lo esencial que no funcionó? –

Se puede utilizar el siguiente código con el fin de mover el contenido:

div.read-more a:before { 
    content: "\00BB \0020"; 
    position: relative; 
    top: -2px; 
}

Fuente

2013-05-05 17:59:12

Ésta era mi solución, con un mouseover:

div.read-more a:before { 
    content: url(image.png); 
    position: relative; 
    top: 3px; 
    left: -7px; 
    padding-left: 7px; 
} 
div.read-more a:hover:before { 
    content: url(image_hover.png); 
}

Fuente

2014-11-13 12:44:54 Bas

Tienes que hacer posición: relativa a .read-more y luego puede cambiar de posición.

violín

Fuente

2016-11-01 10:29:44 Bunty

Editado @Richard JP Le de Guen para que coincida con la versión solicitada un poco más

HTML

<div class="read-more"> 
    <a href="#">Read More</a> 
</div>

CSS

div.read-more a:before { 
    background: url('http://i.stack.imgur.com/XyerX.jpg') CENTER CENTER NO-REPEAT; 
    content:""; 
    width:21px; 
    height:21px; 
    display: inline-block; 
    vertical-align: sub; 
    margin-right: 4px; 
    line-height: 21px; 
} 
div.read-more { 
    background: red; 
    line-height: 21px; 
    display:block; 
    vertical-align:middle; 
    width: max-content; 
    padding: 4px; 
} 
div.read-more a{ 
    color: white; 
    text-decoration:none; 
}

http://jsfiddle.net/7X7x2/688/

Fuente

2018-01-26 03:43:22 thebigsmileXD

Forma correcta de colocar: antes de los pseudo-elementos

Respuesta

Cuestiones relacionadas