Stack Overflow en español Asked by Álvaro García on December 5, 2021
Muy buenas,
Pues lo dicho, ¿alguien sabe cómo tocar los estilos del texto sin afectar al anchor?
Básicamente, lo que me gustaría sería poner un min-height al texto para que el "read more" no se descuadre.
He buscado pseudo selectores, lo he intentado con el not:, he probado a cambiar el excerpt the wordpress pero no encuentro la forma. Y la verdad me extraña que no haya algún selector css para estos caso.
Aquí tenéis el código:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et do[…]
<a class="read-more" href="http://testing.wholesalenosestuds.com/testin-3/">
Read more
</a>
</p>
si estas limitado a esa estructura probaste crear los "read me" con ::before? te dejo un ejemplo para tu caso , espero que te sirva y sino exitos!
.parrafo{
width: 300px;
min-height: 100px;
margin: 2rem;
border: 1px solid black;
}
.ancla{
text-decoration: none;
}
.ancla::before
{
display: block;
content: 'read me';
margin: 2rem auto;
text-align: center;
color: yellow;
width: 40%;
background-color: teal;
border-radius: 1rem;
}
<p class="parrafo">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi, quisquam! Vel similique sit tempora nobis beatae veritatis quo! Amet porro, eius fuga fugit unde officia quae provident atque nam distinctio?
<a href="#" class="ancla"></a>
</p>
Answered by facu aquino on December 5, 2021
No me manejo con WordPress, pero a nivel de la maquetación considero que es donde debería existir una modificación en cuanto a las etiquetas HTML que estás usando.
Por otro lado de la manera en que buscas el resultado y basándonos en lo que nos indicas has investigado o tratado pienso que:
Código:
<style>
.galeria {
border: 1px solid;
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 0 auto;
padding: 20px;
width: 800px;
}
.galeria-imagen {
border: 1px solid;
width: 250px;
}
.enlaceN {
color: red;
grid-row: 2;
text-align: center;
}
</style>
<section class="galeria">
<article class="galeria-imagen">
<p class="galeria-imagen__parrafo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione ea nulla vero ad iure hic inventore quasi error voluptatem. Sunt at ea, voluptatem nam culpa delectus, eligendi similique? Quae, unde.
kjhdfkjshfksdhjfksjhkshjfksjhflorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium rem nulla libero commodi, tempora, officiis, necessitatibus, reprehenderit quis deleniti temporibus harum! Qui aperiam officia, laudantium iusto dolorum sequi adipisci ipsum!
</p>
</article>
<a href="" class="enlaceN">Leer Mas</a> </div>
<article class="galeria-imagen">
<p class="galeria-imagen__parrafo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur odit facere, laboriosam doloribus similique earum id. Fuga accusantium dolor quia ex in illum voluptatem! Similique fugit saepe nihil dolorum nostrum.
</p>
</article>
<a href="" class="enlaceN">Leer Mas</a>
<article class="galeria-imagen">
<p class="galeria-imagen__parrafo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dignissimos alias minus id veritatis pariatur magni, accusantium iusto excepturi odit voluptatem, ipsum ducimus ullam, esse repellat dolor, repellendus et inventore.
</p>
</article>
<a href="" class="enlaceN">Leer Mas</a>
</section>
Con un resultado así:
Enlaces de interés
Answered by BetaM on December 5, 2021
haz intentado con una clase para los 3 botones y colocar a todos en la misma posicion con un absolute?
nota: si mi respuesta no es lo ms profesional es que tambien estoy empezando, solo intento darle alguna solucion
Answered by Diego Goncalves on December 5, 2021
Te recomiendo usar Grid para dividir el elemento en 3 partes, siendo la tercera el boton de View more, asi la altura de este seria totalmente independiente del tamaño del parrafo, tambien puedes meter esos elementos dentro de un container y hacer que este controle el alto, asi la altura de las columnas siempre seria igual independientemente de cuando texto haya dentro, espero que te sea de ayuda. :)
Answered by vo1d dev on December 5, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP